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>
Incorporate these styling techniques into your own code to create visually appealing and intuitive editable DIV elements.
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!