如何在Twitter Bootstrap中更改输入和文本区域元素的边框/轮廓颜色？

在Twitter Bootstrap中更改输入和文本区域元素的边框/轮廓颜色可以通过以下几种方法实现：

你可以直接在HTML元素上使用内联样式来更改边框颜色。

<input type="text" class="form-control" style="border-color: #FF5733;">
<textarea class="form-control" style="border-color: #FF5733;"></textarea>

你可以创建一个自定义的CSS类，并在Bootstrap的样式之后引入这个类。

/* 自定义CSS文件 */
.custom-border {
  border-color: #FF5733 !important;
}

然后在HTML中使用这个自定义类：

<input type="text" class="form-control custom-border">
<textarea class="form-control custom-border"></textarea>

你可以在你的CSS文件中覆盖Bootstrap的默认样式。

/* 自定义CSS文件 */
.form-control:focus {
  border-color: #FF5733;
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(255, 87, 51, 0.25);
}

Bootstrap 4及以上版本支持自定义变量，你可以在custom.scss文件中定义新的颜色变量。

// custom.scss
$border-color: #FF5733;

@import "~bootstrap/scss/bootstrap";

然后编译这个SCSS文件生成CSS文件，并在项目中引入。

这些方法适用于任何需要自定义Bootstrap输入和文本区域边框颜色的场景，例如：

通过以上方法，你可以轻松地更改Twitter Bootstrap中输入和文本区域元素的边框/轮廓颜色。选择哪种方法取决于你的具体需求和项目结构。

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云