Brana Brana - 5 months ago 43
CSS Question

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



#ta {
-moz-appearance: textfield-multiline;
padding: 11px;

}

.mta {
padding: 11px;

}

<div id="textarea" 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="firsttextarea" name="inputText" cols="100" rows="20" class="maintextarea">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

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>

Comments