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

Question

这是我的form

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。我这样做：

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

结果：

这是一种不同的风格！我想要一个像这样的样式或类似的textarea：

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

Answer 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"来自bootstrap，如果您希望将输入元素设置为bootstrap，请将bootstrap添加到HTML Doc。您还可以向新文本区域类添加属性，并更改其外观。

希望这可以帮助。