element-ui Select选择器边框闪烁问题 及 :focus-within伪类

背景

在提分加项目中用到了element-ui的select组件，发现第一次进入页面点击选择器时会有一个边框闪烁，后审查元素时发现了:focus-within的伪类。

解决

.select-box span:focus-within {
  border: none;
  outline: none;
}

其中，.select-box是我给select组件取的类名，添加完以上样式后，边框闪烁问题完美解决。

学习

• 定义：:focus-within 是一个CSS 伪类 ，表示一个元素获得焦点或该元素的后代元素获得焦点。换句话说，元素自身或者它的某个后代匹配:focus伪类。

• 实例：

  <p>Try typing into this form.</p>
  
  <form>
  <label for="given_name">Given Name:</label>
  <input id="given_name" type="text">
  <br>
  <label for="family_name">Family Name:</label>
  <input id="family_name" type="text">
  </form>

  form {
  border: 1px solid;
  color: gray;
  padding: 4px;
  }
  
  form:focus-within {
  background: #ff8;
  color: black;
  }
  
  input {
  margin: 4px;
  }

• 兼容性：目前的兼容性还不太好，在高版本的chrome和firefox浏览器中已支持，IE下不支持。

参考文章：MDN web docs :focus-within