无法在 bootstrap v5 中更改文本区域的背景

Answer 1

有多种方法可以更改引导元素的样式。

1. 将引导类

   bg-{color}

   添加到您的元素
2. 使用自定义 CSS 规则为元素设置样式

#example_ta2 {
  background-color: cyan;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row my-3">
    <div class="col-12">
      <label for="example_ta" class="form-label">You can change the background-color with a bootstrap-class, e.g. <code>bg-primary</code>...</label>
      <textarea class="form-control bg-primary" name="example" id="example_ta" rows="5"></textarea>
    </div>
    <div class="col-12 mt-3">
      <label for="example_ta2" class="form-label">...or change it with custom CSS.</label>
      <textarea class="form-control" name="example2" id="example_ta2" rows="5"></textarea>
    </div>
  </div>
</div>

但是，请注意，根据您嵌入样式表的方式以及您的选择器和 css 规则，某些样式可能会被引导程序覆盖（请参见下面的示例）。

#example_ta3 {
  background-color: orange;
}

#example_ta4 {
  background-color: orange!important;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
<div class="row my-3">
    <div class="col-12">
      <label for="example_ta3" class="form-label">Note that custom bootstrap-classes usually overwrite your custom CSS...</label>
      <textarea class="form-control bg-danger" name="example3" id="example_ta3" rows="5"></textarea>
    </div>
    <div class="col-12 mt-3">
      <label for="example_ta4" class="form-label">...unless you overwrite them with <code>!important</code> or by having a more precise selector.</label>
      <textarea class="form-control bg-danger" name="example4" id="example_ta4" rows="5"></textarea>
    </div>
  </div>
</div>

另请注意，您可以自定义引导程序变量以更改所有引导程序组件和样式的样式。