CSS关于:focus 伪类的几个冷知识

今天在写项目时，遇到一个问题，我需要点击input框，显示input框，以及iconfont元素。但这个元素需要被该input框包含。我尝试了许多种方法，效果都不好，后面发现了一个有趣的伪类。

<div id="clickSearch">
    <form action="">
        <i class="iconfont icon-search" style="margin-left: 5px"></i>
        <input type="text" placeholder="Search" style="margin: 0;">
    </form>
</div>

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

有了这个伪类，我们就可以这样写：

#clickSearch input {
    border: none;
    background-color: #fff;
    width: 160px;
}


#clickSearch form:focus-within {
    border: 1px solid gray;
    border-radius: 4px;
    color: #000;
}

一个非常有趣，但之前未发现的伪类。在MDN上还找到一个特殊的伪类，:focus-visible 

当元素匹配:focus伪类并且客户端 (UA) 的启发式引擎决定焦点应当可见 (在这种情况下很多浏览器默认显示“焦点框”。) 时，**:focus-visible **伪类将生效。

MDN的这个解释有点难以理解，查阅了资料发现，有些元素在鼠标点击以及键盘访问下会产生明显的焦点轮廓，例如input、button。但是我们需要在鼠标点击时不显示，但是键盘访问需要显示焦点轮廓，因此可以借助该伪类实现。

此外还有几个特殊的伪类，有时间可以继续深入研究。