How to Style a DIV to Look Like a Text Field?

How to Style a DIV to Mimic a Text Field Appearance

If you have a DIV element with contentEditable enabled, users can edit its content. However, its default styling might not convey its editable nature. This article explores a solution to make the DIV appear like a text input field.

CSS and HTML Styling

The provided CSS and HTML sample demonstrate how to style the DIV to resemble a textarea and input field. The CSS includes vendor-prefixed styles to support different browsers.

Output

The resulting output creates a visually indistinguishable editable DIV from actual text fields in Safari, Chrome, and Firefox. It displays acceptably in Opera and IE9 as well.

Demo and Sample Code

For a working demonstration, visit the provided jsfiddle URL:

http://jsfiddle.net/ThinkingStiff/AbKTQ/

The CSS and HTML code samples are provided below for your reference:

CSS:

textarea {
    /* shared properties */
    height: 28px;
    width: 400px;
}

#textarea {
    /* textarea-specific properties */
    -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;
}

input {
    /* shared properties */
    margin-top: 5px;
    width: 400px;
}

#input {
    /* input-specific properties */
    -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;    
}

HTML:

<textarea>I am a textarea</textarea>
<div><p>Incorporate these styling techniques into your own code to create visually appealing and intuitive editable DIV elements.</p></div>

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