如何在Ruby on Rails的Materialize输入框中修改预设下划线颜色

别着急，我来帮你搞定这个输入框下划线颜色的问题！你用的是Rails结合Bootstrap的表单，默认的form-control类自带了边框样式，直接修改很容易被Bootstrap的默认样式覆盖，试试下面这几种方法：

方法一：自定义CSS覆盖样式 #

你已经给输入框加了white-text类，我们可以针对这个类写优先级更高的样式，确保能覆盖Bootstrap的默认设置：

/* 正常状态下的下划线 */
.white-text.form-control {
  border-bottom: 2px solid #ff0000; /* 替换成你想要的颜色值，比如红色#ff0000 */
  border-top: none;
  border-left: none;
  border-right: none;
  box-shadow: none; /* 去掉Bootstrap默认的边框阴影 */
  background-color: transparent; /* 如果不需要背景色可以加上 */
}

/* 聚焦状态下的下划线（可选） */
.white-text.form-control:focus {
  border-bottom-color: #00ff00; /* 聚焦时的颜色，比如绿色#00ff00 */
  box-shadow: 0 1px 0 0 #00ff00; /* 匹配Bootstrap聚焦时的下划线效果 */
  outline: none; /* 去掉默认的聚焦外框 */
}

把这段CSS放到你的样式文件里（比如app/assets/stylesheets/application.css或者对应的SCSS文件）就能生效了。

方法二：修改Bootstrap变量（如果用Sass版本） #

如果你的项目用的是Sass版的Bootstrap，可以直接修改全局变量来统一设置：

// 在引入Bootstrap之前定义变量
$input-border-color: #your-color; /* 正常状态的边框颜色 */
$input-focus-border-color: #your-focus-color; /* 聚焦状态的边框颜色 */
$input-box-shadow-focus: 0 1px 0 0 $input-focus-border-color; /* 聚焦时的下划线阴影 */

// 然后引入Bootstrap
@import "bootstrap";

这样所有form-control组件的下划线颜色都会跟着改变，适合全局统一修改的场景。

小提示 #

要确保你的CSS代码加载顺序在Bootstrap之后，这样自定义样式才能优先覆盖默认样式哦！

内容的提问来源于stack exchange，提问作者Andrea Bazán