How Can I Style an Editable DIV to Look Like a Text Field?

Making an Editable DIV Resemble a Text Field

Oftentimes, it may be desirable to allow users to edit specific sections of a web page using editable DIVs. However, DIV elements naturally lack the visual cues that indicate editability, leaving users uncertain about whether they can interact with them.

To address this issue, CSS styling can be employed to transform an editable DIV into a semblance of a standard text input field. Fortunately, modern browsers provide specific CSS properties that mimic the appearance of native text input controls.

CSS Styling for a Text Field-Like DIV

The following CSS code can be applied to a DIV to give it a text field-like appearance:

#textarea {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  border: 1px solid gray;
  font: medium -moz-fixed;
  font: -webkit-small-control;
  height: 28px;
  overflow: auto;
  padding: 2px;
  resize: both;
  width: 400px;
}

In addition, specific styles can be applied to the textarea element for added realism:

textarea {
  height: 28px;
  width: 400px;
}

CSS Styling for a Text Field-Like Input

Similarly, an input can be styled to resemble a text field using the following CSS:

#input {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
  background-color: white;
  background-color: -moz-field;
  border: 1px solid darkgray;
  box-shadow: 1px 1px 1px 0 lightgray inset;  
  font: -moz-field;
  font: -webkit-small-control;
  margin-top: 5px;
  padding: 2px 3px;
  width: 398px;    
}

input {
  margin-top: 5px;
  width: 400px;
}

Output

The resulting HTML and CSS produce the following output:

[Image of a textarea and an input, both styled to look like text fields]

This styling is compatible with Safari, Chrome, and Firefox, degrading gracefully for Opera and IE9.

The above is the detailed content of How Can I Style an Editable DIV to Look Like a Text Field?. For more information, please follow other related articles on the PHP Chinese website!