Materialze输入底部边框底部的颜色未聚焦

Question

我有以下html：

$ awk 'NR==FNR{a[$0]; next} {orig=$0; $1=$1} !($0 in a){print orig}' file2 file1
there is a line here that has more than two columns
## this line is a comment
blahblah:     blahblahSierraexample7272
foo: foo@foobar.com
nonsense:   someRandomColumn
.....

和以下CSS：

        <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>

焦点对准时，输入的底部轮廓仍然是默认的蓝色，而不是绿色的＃4ec632。我尝试了多种解决方案，并参考了实现文档，但到目前为止，似乎没有任何工作。关于我应该尝试什么的任何想法？

Answer 1

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

对于您的信息，您可能需要更改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-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。