使用MaterializeCSS时input:focus出现异常轮廓的问题求助

嘿，我太懂这种烦躁了——Materialize自带的样式有时候就像“顽固分子”，明明写了outline:none还是会跳出奇怪的高亮！结合你提供的代码和问题动图来看，大概率是Materialize的输入框组件用了伪元素来实现聚焦时的底部高亮，而你的CSS只覆盖了输入框本身，没处理这个伪元素。

问题根源 #

Materialize的.input-field组件（你应该也是用这个结构包裹输入框的吧？）在输入框聚焦时，会给相邻的<label>标签添加::after伪元素，用来显示底部的高亮边框——这就是你看到的“异常轮廓”，它不是输入框本身的outline或box-shadow，而是标签的伪元素样式。

解决方案 #

你需要在现有CSS基础上，加上对这个伪元素的样式覆盖，同时确保输入框本身的样式优先级足够。试试这段代码：

/* 覆盖输入框本身的聚焦样式 */
.inputs input[type=text]:focus {
  border: 1px solid #FFFFFF!important;
  background-color: #FAFAFA!important;
  box-shadow: none!important;
  outline: none!important;
  /* 去掉可能存在的底部边框 */
  border-bottom: none!important;
}

/* 覆盖Materialize添加的label伪元素高亮 */
.inputs input[type=text]:focus + label::after {
  box-shadow: none!important;
  border-bottom: none!important;
}

小提示 #

尽量少用!important，如果想更优雅地提升优先级，可以给你的输入框容器加个更具体的类或者ID，比如：

.my-custom-form .inputs input[type=text]:focus {
  /* 这里就不用!important啦 */
  border: 1px solid #FFFFFF;
  background-color: #FAFAFA;
  box-shadow: none;
  outline: none;
  border-bottom: none;
}

.my-custom-form .inputs input[type=text]:focus + label::after {
  box-shadow: none;
  border-bottom: none;
}

这样就能彻底干掉那些恼人的异常轮廓啦！

内容的提问来源于stack exchange，提问作者Yael Yañez