如何在css中管理两个不同大小的textarea框

Question

在css中我需要两个不同大小的textarea盒子。

我的Jsfiddle代码链接是：--- jsfiddle link

但现在我变得相同textarea ..我做错了什么???

Answer 1

您可以分配两个不同的ID，然后设置样式：

<div class = "tablebox">   
<form>
<label for="emailaddress">address</label>
<textarea cols="73" rows="12" name="descr" id="texta1"></textarea><br />
<label for="comments">About you </label>
<textarea name="comments" id="texta2"></textarea><br />
</form>
</div>

CSS：

.tablebox 
{

  width: 100%;
  background-color: #F7F7F7;
  margin: 0 auto 10px;
  border-radius: 2px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);

}

label{
float: left;
width: 100%;
margin-left:10px;
margin-top:10px;
margin-bottom:10px;
font-weight: bold;
}

input{
width: 80%;
margin-bottom: 5px;
}

textarea{
width: 50%;
height: 300px;
}

#texta1{
width: 30%;
height: 300px;
}

#texta2{
width: 70%;
height: 300px;
}

Answer 2

为两个textarea id提供不同的高度。

 textarea1 { height:10%; }
 textarea2 { height:20%; }

这可能会对你有帮助。

Answer 3

请试试这个：

.tablebox 
{

  width: 100%;
  background-color: #F7F7F7;
  margin: 0 auto 10px;
  border-radius: 2px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);

}

label{
float: left;
width: 100%;
margin-left:10px;
margin-top:10px;
margin-bottom:10px;
font-weight: bold;
}

input{
width: 80%;
margin-bottom: 5px;
}

textarea1 {
     height:10%;
}
 textarea2 { 
     height:20%;
 }

Demo

Answer 4

Textarea有两个属性rows和cols，分别类似于height和width CSS的属性。

所以我建议你使用其中任何一个而不是两者。如果您正在设计 Respoonsive Design ，则必须使用CSS height & width属性。

例如，删除（评论）css for textarea。

＆＃13;

＆＃13;

.tablebox 
{
	
  width: 100%;
  background-color: #F7F7F7;
  margin: 0 auto 10px;
  border-radius: 2px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
 
}

label{
float: left;
width: 100%;
margin-left:10px;
margin-top:10px;
margin-bottom:10px;
font-weight: bold;
}

input{
width: 80%;
margin-bottom: 5px;
}

textarea{
/*width: 50%;
height: 200px;*/
}

＆＃13;

  <div class = "tablebox">
      
 <form>
<label for="emailaddress">address</label>
<textarea cols="73" rows="12" name="descr"></textarea><br />

<label for="comments">About you </label>
<textarea name="comments" ></textarea><br />

</form>


</div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

将不同的类添加到textarea并在css中为textarea指定样式。

例如：HTML

<form>
<label for="emailaddress">address</label>
<textarea class="textarea1" cols="73" rows="12" name="descr"></textarea><br />

<label for="comments">About you </label>
<textarea class="textarea2" name="comments"></textarea><br />

</form>

CSS

.textarea1{width: 150px; height: 30px;}
.textarea2{width: 300px; height: 60px;}