包括具有相同样式的文本区域

Question

这是我的表格

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>

结果：

不一样的风格！我想要一个具有相同样式或类似样式的文本区域：

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

Answer 1

试试这个解决方案：

HTML（添加class名字'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" 来自 bootstrap，如果您希望输入元素的样式符合 bootstrap，请将 bootstrap 添加到您的 HTML 文档中。您还可以向新的文本区域添加属性 class 并进一步更改它的外观。

希望这对您有所帮助。

包括具有相同样式的文本区域

Include a text area with the same style

html

css

forms

textarea