html - Materialze 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。我尝试了多种解决方案并参考了物化文档，但到目前为止似乎没有任何效果。关于我应该尝试什么的任何想法？

标签： htmlcssfocusbordermaterialize

Answer 1

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

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

/*.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>