Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I make an editable DIV look like a text field?

Tags:

html

css

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?

like image 336
sanity Avatar asked Jan 21 '12 20:01

sanity


People also ask

How do I make a div text editable?

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.

Can a div have text?

Yes, you can directly add content text into a div tag, although using p tags would be preferable in most circumstances.

How do I create a Multilined text field?

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.


2 Answers

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:

enter image description here

like image 146
ThinkingStiff Avatar answered Sep 23 '22 01:09

ThinkingStiff


If you use bootstrap just add form-control class. For example:

class="form-control"  
like image 35
paraplu Avatar answered Sep 23 '22 01:09

paraplu