背景
在提分加项目中用到了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下不支持。