Question

我想在不同的网页上放置不同的textarea。 textarea的 CSS 似乎覆盖了行和 cols 我尝试为第二个textarea设置。我试过“ textarea ”和“ textarea1 ”，但这显然不起作用。

textarea {
  width: 40%;
  height: 75px;
  padding: 12px 20px ;
  box-sizing: border-box;
  border: 5px solid #D8FF01;
  border-radius: 4px;
  background-color: #000;
  color: white;
  font-weight: bolder; 
  resize: both;
}

<form>
  <textarea name="comment" placeholder="Enter text here"></textarea>
</form>

<form>    
  <textarea name="reason" placeholder="Enter text here: (500 characters maximum)" maxlength="500" rows="10" cols="50"></textarea>
</form>

Answer 1

你可以像这样使用

textarea:not(.reason) {
    width: 40%;
    height: 75px;
    padding: 12px 20px ;
    box-sizing: border-box;
    border: 5px solid #D8FF01;
    border-radius: 4px;
    background-color: #000;
    color: white;
    font-weight:bolder; 
    resize:both;
}

<form>
<textarea name="comment" placeholder="Enter text here"></textarea>
</form>

<form>    
<textarea name="reason" class="reason" placeholder="Enter text here: (500 characters maximum)" maxlength="500" rows="10" cols="50"></textarea>
</form>

以这种方式，CSS selector使用class元素。

或

textarea.myTextBox {
  width: 40%;
  height: 75px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 5px solid #D8FF01;
  border-radius: 4px;
  background-color: #000;
  color: white;
  font-weight: bolder;
  resize: both;
}

<form>
  <textarea name="comment" class="myTextBox" placeholder="Enter text here"></textarea>
</form>

<form>
  <textarea name="reason" placeholder="Enter text here: (500 characters maximum)" maxlength="500" rows="10" cols="50"></textarea>
</form>

Answer 2

您的代码应该是这样的

<强> HTML：

<form>
 <textarea class="textarea1" name="comment" placeholder="Enter text here"> 
 </textarea>
</form>

<form>    
 <textarea class="textarea2" name="reason" placeholder="Enter text here: (500 characters maximum)" maxlength="500" rows="10" cols="50"></textarea>
</form>

<强> CSS：

.textarea1 {
  width: 40%;
  height: 75px;
  padding: 12px 20px ;
  box-sizing: border-box;
  border: 5px solid #D8FF01;
  border-radius: 4px;
  background-color: #000;
  color: white;
  font-weight:bolder; 
  resize:both;
}

.textarea2 {
  width: 40%;
  height: 75px;
  padding: 12px 20px ;
  box-sizing: border-box;
  border: 5px solid #D8FF01;
  border-radius: 4px;
  background-color: #000;
  color: white;
  font-weight:bolder; 
  resize:both;
}

Answer 3

尝试通过使用类来为两者单独执行css：

<form>
    <textarea class="xxx" name="comment" placeholder="Enter text here">
    </textarea>
</form>

<form>    
     <textarea class="yyy" name="reason" placeholder="Enter text here: (500 characters maximum)" maxlength="500" rows="10" cols="50">
     </textarea>
</form>

CSS：

.xxx {
    enter styling code here
}

.yyy {
    enter styling code here
}

不同的textarea元素在不同的页面上

3 个答案:

或