你可能不知道的CSS（2）

今天要讲的是一个伪类选择器。:focus-within，表示当自身或者其子元素聚焦时的状态。常用于输入框组件。

示例如下。

<style>
    .input-wrap {
        display: inline-flex;
        border: 1px solid #ddd;
    }
    .input-wrap:focus-within {
        border-color: blue;
    }
    input {
        border: 0;
        outline: none;
    }
</style>

<div class="input-wrap">
    <input type="text" />
</div>

一般组件库的输入框组件都会将原生input再包裹一层，input本身的边框会去掉，外层的边框会根据输入框是否焦点变色，如果没有 focus-within 选择器，那么一般需要监听 input 是否焦点，然后再去父容器添加class来实现，有了这个选择器，纯CSS就能完成了。