Determine font of textbox and make contenteditable look the same as textbox - html

Question

I am having trouble making a contenteditable look like a textbox on my site. Does anyone know what is the font on the picture - I have tried a lot of them an none matches well.
The contenteditable is above and the textarea is bellow .. i would like to know what is this font?
Here is the code as well
#mw {
-moz-appearance: textfield-multiline;
padding: 11px;
}
.mw1 {
padding: 11px;
}
<div id="mw" contenteditable>I am not really sure what this font is and I am trying to make a contenteditable area look like a text area.
Thanks for the help.
</div>
<textarea id="aid" name="inputText" class="mw1">I am not really sure what this font is and I am trying to make a contenteditable area look like a text area.
Thanks for the help.</textarea>

Answer 1

Still having trouble with trying to match fonts and color? See this Snippet for details.
SNIPPET
.textBox { font: 400 13px/1.428 'Courier New'; color: rgba(0,0,0,1); }
#textarea {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
padding: 5px;
border-radius: 4px;
border: 2px solid #ddd;
padding: 4;
overflow: hidden; overflow-y: auto;
height: 100px;
background-color: #FFFFFF;
resize: both;
overflow: auto;
width:300px;
height: 100px;
font: inherit;
color: inherit;
}
.maintextarea {
padding: 5px;
border-radius: 4px;
border:solid 2px #ddd;
background-color: #FFFFFF;
width:300px;
height: 100px;
font: inherit;
color:inherit;
}
<section class="textBox">
<div id="textarea" contenteditable>
In this demo, I have wrapped a <section> element around both boxes. It has a class name of .textBox.
This is the CSS:
.textBox {
font: 400 16px/1.428 'Courier New';
color: rgba(57,64,68,1);
}
</div>
<textarea id="firsttextarea" name="inputText" cols="100" rows="20" class="maintextarea">
Now for the 2 editors #textarea and .maintextarea we add the following CSS to both of them:
font: inherit;
color:inherit;
</textarea>
</section>

Answer 2

i think the font is Consolas. but as for making the div appear like a textarea, you can try
<table bgcolor=buttonshadow cellpadding=3 cellspacing=3>
<tr>
<td bgcolor=buttonhighlight>
<div id="mw" style="
font:consolas;
width:400px;
height:200px;
overflow-y:scroll;
overflow-x:hidden;" contenteditable>
I am not really sure what this font is and I am trying to make a contenteditable area look like a text area.
Thanks for the help.
</div>
</td>
</tr>
</table>
Just adjust the Width and or Height to the way you like it.
This would work as long as you don't have a super long string fragment that has no spaces (ie a hyperlink). if you do then that super long word may be cut off.
You can remedy that by changing
overflow-x:hidden;
to
overflow-x:auto;
but that would add a horizontal scroll bar if it is needed. Alternatively you can add a "-" and a space somewhere in the Long word to seperate it into two or more lines