Materialise Input 底部边框底部颜色在焦点上不改变

Question

我有以下 html:

        <div class="centered">
          <form class="col">
            <input type="text" class="input-field"></input>
            <span class="helper-text">Email</span>
            <div className="button-wrapper">
              <button className="btn" type="submit">Submit</button>
            </div>
          </form>
        </div>

以及以下 css：

.input-field input[type=text]:focus {
  border-bottom: 1px solid #4ec632;
  box-shadow: 0 1px 0 0 #4ec632;
}

聚焦时输入的底部轮廓仍然是默认的蓝色，而不是绿色 #4ec632。我尝试了多种解决方案并参考了物化文档，但到目前为止似乎没有任何效果。关于我应该尝试什么有什么想法吗？

Answer 1

我修改了您的 CSS 选择器，使其在输入字段获得焦点时更改样式。我还将边框和阴影宽度更改为 10px 以使其显示得更明显。

关于您的信息，您可能想要更改 outline 而不是边框。 outline 只能应用于整个元素，不能只改变 outline 底部。

/*.input-field input[type=text]:focus {*/
input[type=text].input-field:focus {
  border-bottom: 10px solid #4ec632;
  box-shadow: 0 10px 0 0 #4ec632;
}

<div class="centered">
          <form class="col">
            <input type="text" class="input-field"></input>
            <span class="helper-text">Email</span>
            <div className="button-wrapper">
              <button className="btn" type="submit">Submit</button>
            </div>
          </form>
        </div>

Answer 2

以物化的方式控制焦点边框颜色：

1) 使用正确的标记

<div class="input-field">
  <input id="first_name2" type="text" class="validate">
  <label class="active" for="first_name2">First Name</label>
</div>

这是嵌套在 div 内的 input/label 对，class 为 .input-field - 包装允许标签在聚焦时移动。（它不应该像您的示例那样应用于输入本身）。您还缺少一个标签（这可能是故意的）。

2) 使用正确的 css 覆盖：

input[type=text]:not(.browser-default):focus {
     border-bottom: 1px solid firebrick !important;
     -webkit-box-shadow: 0 1px 0 0 firebrick !important;
     box-shadow: 0 1px 0 0 firebrick !important;
   }

 input[type=text]:not(.browser-default):focus:not([readonly])+label {
     color: firebrick;
 }

用您想要的颜色替换 firebrick。

Codepen.

Materialise Input 底部边框底部颜色在焦点上不改变

Materialze Input bottom border-bottom color not changing on focus

html

css

focus

border

materialize