Materialze输入的底部边框底部颜色没有改变焦点

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而不是边框​​。轮廓仅适用于整个元素，不能仅更改轮廓底部。

Answer 2

以实现的方式控制焦点边框颜色：