How Can I Make Editable DIVs Look Like Text Fields?

Creating Editable DIVs with the Appeal of Text Fields

When designing editable user interfaces, it's crucial to visually cue users to interactive elements. A DIV with contentEditable enabled provides editable functionality, but its appearance may not be intuitive. Fortunately, CSS techniques can transform DIVs to mimic the aesthetics of text fields.

One approach is to leverage browser-specific appearances. For Safari, Chrome, and Firefox:

#textarea {
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
}

#input {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
}

This CSS simulates a textarea and text input field, respectively.

If you prefer cross-browser compatibility, the following style can achieve a similar result:

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

#input {
    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;
}

With these tweaks, your editable DIVs will take on the familiar appearance of text fields, making their functionality more user-friendly.

The above is the detailed content of How Can I Make Editable DIVs Look Like Text Fields?. For more information, please follow other related articles on the PHP Chinese website!