html - 不同页面上的不同文本区域元素

Question

我想在不同的页面上放置不同的textarea。 textarea 的 CSS 似乎覆盖了 rows 和 cols 我尝试为第二个 文本区域。我试过“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选择器就使用了元素的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>