Search code examples
htmlcssstylesheetcontenteditable

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

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. enter image description here

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>

Solution

  • 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 &lt;section&gt; 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>