Identify the font style of the text box and ensure that the contenteditable feature matches the appearance of the

Question

Identify the font style of the text box and ensure that the contenteditable feature matches the appearance of the

I'm struggling to style a contenteditable element to resemble a regular textbox on my website. Can anyone help me identify the font used in this picture? I've tried several but none seem to match perfectly. https://i.sstatic.net/2aAbb.jpg

The contenteditable section is displayed above, and the textarea below it. I'm curious about what font is being used here.

Below is the code snippet:

#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>

html css stylesheet contenteditable

Answer 1

Answer №1

Encountering difficulties with matching fonts and colors? Take a look at this Snippet for guidance.

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>

Answer 2

Encountering difficulties with matching fonts and colors? Take a look at this Snippet for guidance.

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>

Answer 3

Answer №2

It appears that the font used is Consolas. However, if you want to make the div look like a textarea, you can try the following:

<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 uncertain of the font and I am attempting to achieve a text area-like appearance in a contenteditable section. 

       Thank you for your assistance.
      </div>
    </td>
  </tr>
</table>

You can adjust the Width and Height as needed.

This method should work unless there is an extremely long string without spaces (such as a hyperlink). In that case, the long word may get cut off.

To address this issue, you can change

overflow-x:hidden;

to

overflow-x:auto;

This will introduce a horizontal scroll bar when necessary. Another option is to insert a "-" and a space within the long word to break it into multiple lines.

Answer 4

It appears that the font used is Consolas. However, if you want to make the div look like a textarea, you can try the following:

<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 uncertain of the font and I am attempting to achieve a text area-like appearance in a contenteditable section. 

       Thank you for your assistance.
      </div>
    </td>
  </tr>
</table>

You can adjust the Width and Height as needed.

This method should work unless there is an extremely long string without spaces (such as a hyperlink). In that case, the long word may get cut off.

To address this issue, you can change

overflow-x:hidden;

to

overflow-x:auto;

This will introduce a horizontal scroll bar when necessary. Another option is to insert a "-" and a space within the long word to break it into multiple lines.

Identify the font style of the text box and ensure that the contenteditable feature matches the appearance of the

Answer №1

SNIPPET

Answer №2

Similar questions

How to make Jquery skip over elements with a particular data attribute

An unexpected identifier error occurred following an Ajax request

The `appendTo` function in Ajax is used to swap out the current element

Identify which anchor tag from the group with the matching class was selected and retrieve its unique identifier

How can EJS variables be utilized within HTML input fields?

Concealing a div element if the value is null

Updating the appearance of a non-declared HTML child component on-the-fly using Angular

I am experimenting with showcasing a series of Bootstrap div elements, each containing a dynamic carousel of images sourced from a database along with additional information

Location tracking functions only operational when using the local host

Can you use both HTML and JSON in ROR?

Issues with the panel's scroll bar functionality in an HTML document

Is there a way to prioritize the table row background color over the cell input elements background color?

Theming for Atom and Electron developer tools

Assign the callback function to execute when the select element loses focus

Retrieving the statuses of all checkboxes in a web form populated by a MySQL query

Stop the bootstrap navbar from resizing

Is there a way to add a dynamic animation of steam rising from a coffee cup to my SVG icon design?

What is the process of dynamically loading CSS into an HTML document?

Alignment of menu blocks

Begin by opening a single div for each instance