I've got a DIV
which has contentEditable=true
so the user can edit it. The problem is that it doesn't look like a text field, so it may not be clear to the user that it can be edited.
Is there a way that I can style the DIV
so that it appears to the user like a text input field?
Answer: Use the HTML5 contenteditable Attribute You can set the HTML5 contenteditable attribute with the value true (i.e. contentEditable="true" ) to make an element editable in HTML, such as <div> or <p> element.
Yes, you can directly add content text into a div tag, although using p tags would be preferable in most circumstances.
To create a multi-line text input, use the HTML <textarea> tag. You can set the size of a text area using the cols and rows attributes. It is used within a form, to allow users to input text over multiple rows.
These look the same as their real counterparts in Safari, Chrome, and Firefox. They degrade gracefully and look OK in Opera and IE9, too.
Demo: http://jsfiddle.net/ThinkingStiff/AbKTQ/
CSS:
textarea { height: 28px; width: 400px; } #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; } input { margin-top: 5px; width: 400px; } #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; }
HTML:
<textarea>I am a textarea</textarea> <div id="textarea" contenteditable>I look like textarea</div> <input value="I am an input" /> <div id="input" contenteditable>I look like an input</div>
Output:
If you use bootstrap just add form-control
class. For example:
class="form-control"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With