包含具有相同样式的文本区域答案

【问题标题】：Include a text area with the same style包含具有相同样式的文本区域
【发布时间】：2018-02-28 19:18:34
【问题描述】：

这是我的表格

CSS

.signin input[type="text"] {
margin-top: 10px;
margin-bottom: 20px;
background: #fff url('../images/1.png') no-repeat 345px 10px;
font-size: 16px;
padding: 10px 35px 10px 10px;
border: none;
width: 75%;
font-family: Cabin-Regular;
color: gray;
}
.signin  input[type="password"] {
margin-bottom: 20px;
background: #fff url('../images/2.png') no-repeat 345px 10px;
font-size: 16px;
padding: 10px 35px 10px 10px;
border: none;
width: 75%;
font-family: Cabin-Regular;
color: gray;

html

<div class="container">
<h1>Comentanos</h1>
 <div class="contact-form">
 <div class="signin">
 <form>
     <p align="left" style="margin-left:38px; margin-bottom:-5px;"><b>Nombre 
     de Usuario:</b></p>
     <input type="text" class="user" value="Enter Your Username" 
     onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 
     'Enter Your Username';}" />
     <input type="password" class="pass" value="Password" 
     onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 
    'Password';}" />
<!--     <input type="textarea" class="user" value="Enter Your Username" 
    onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 
    'Enter Your Username';}" /> -->
      <textarea class="form-control" rows="7" cols="95" id="comment">
    </textarea>
     <input type="submit" value="Login" />                  
     <p><a href="#">Lost your password?</a></p>  
 </form>
 </div>
 </div>

我想要一个包含文本区域。我这样做：

<textarea class="form-control" rows="7" cols="95" id="comment"></textarea>

结果：

这是一种不同的风格！我想要一个具有相同样式或类似样式的文本区域，如下所示：

。但问题是我不知道该怎么做。

【问题讨论】：

这确实是一个标准的<textarea>。但是您的 <input> 字段也是标准的。您能否清楚地指出确切您希望<texarea> 的显示方式，以便它与两个<input> 字段“样式相同”？就目前而言，您的问题无法回答。
好吧！我只是这样做:)

标签： html css forms textarea

【解决方案1】：

试试这个解决方案：

HTML（添加类名'mytextarea'）：

<textarea class="mytextarea" rows="7" cols="95" id="comment"></textarea>

现在你的 CSS：

.mytextarea {

font-size: 16px;
padding: 10px 35px 10px 10px;
border: none;
font-family: Cabin-Regular;
color: gray;
Width:100%;

}

您也可以像这样将placeholder 添加到您的文本区域：

<textarea placeholder="My text area" class="mytextarea" rows="7" cols="95" id="comment"></textarea>

据我所知，您有一个边框，这是唯一的区别。另请注意，class="form-control" 来自引导程序，如果您想在引导程序中设置输入元素的样式，请将引导程序添加到您的 HTML 文档中。您还可以为新的文本区域类添加属性并进一步更改其外观。

希望这会有所帮助。

【讨论】：

没关系，但我有问题。当您移动/更改 chrome 窗口大小时，文本不会改变他的大小。然后，表单结构中断
@Vidal 请查看我更新的 CSS。尝试添加“宽度：100%；”并检查。还要删除行和列并通过添加宽度进行检查。如果这有帮助，请接受我的回答。