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

http://stackoverflow.com/q/8956567/918414

by Yashpreet Singh

HTML

<textarea>I am a textarea</textarea>
<div id="textarea" contenteditable>I look like a textarea</div>

<input value="I am an input" />
<div id="input" contenteditable>I look like an input</div>

<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-23915674-6']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();


var headerUri = 'http://stackoverflow.com/q/8956567/918414',
headerCaption = 'How do I make an editable DIV look like a text field?';
document.body.insertAdjacentHTML( 
'afterBegin',
'<a href="' + headerUri + '" '
+ 'target="_top" '
+ 'onmouseover="this.style.opacity=\'.95\'" '
+ 'onmouseout="this.style.opacity=\'1\'" '
+ 'style="'
+ 'background-color: black;'
+ 'background-image: linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -moz-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -o-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -ms-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'border: 1px solid black;'
+ 'border-radius: 2px;'
+ 'color: white;'
+ 'display: block;'
+ 'font: normal 15px/26px Helvetica, Verdana, Tahoma;'
+ 'height: 26px;'
+ 'margin: -8px 0 8px -8px;'
+ 'opacity: 1;'
+ 'overflow: hidden;'
+ 'padding: 2px 8px;'
+ 'text-decoration: none;'
+ 'text-overflow: ellipsis;'
+ 'text-shadow: -1px -1px black;'
+ 'width: 99.5%;'
+ 'white-space: nowrap;'
+ '"><img '
+ 'style="' 
+ 'display: block;'
+ 'float: left;'
+ 'margin-right: 8px;" '
+...

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;    
}