Question

我无法在我的网站上制作出像文本框那样令人满意的外观。有谁知道图片上的字体是什么 - 我已经尝试过很多非匹配的字体。

满足的是上面，textarea是吼叫..我想知道这个字体是什么？

以下是代码

＆＃13;

#mw {
  	-moz-appearance: textfield-multiline;
    padding: 11px; 

}

.mw1 {
    padding: 11px; 

}

＆＃13;

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

＆＃13;

Answer 1

尝试匹配字体和颜色仍有问题？有关详细信息，请参阅此代码段。

段

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我认为字体是Consolas。但至于使div看起来像textarea，你可以尝试

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

只需按照您喜欢的方式调整宽度和/或高度。

只要您没有没有空格的超长字符串片段（即超链接），这就可以工作。如果你这样做那么超长的话可能会被切断。

您可以通过更改

来解决这个问题

overflow-x:hidden;

到

overflow-x:auto;

但如果需要，可以添加水平滚动条。或者，您可以在长字中的某处添加“ - ”和空格，将其分成两行或更多行

确定文本框的字体并使contenteditable看起来与文本框相同

2 个答案:

段