理解 focus-within 伪类

focus-within是css中的一个伪类，与 focus 类似，说到focus-within，你一定会想它与focus有什么区别？

focus 表示一个元素获得焦点，你可以对该元素进行操作。而 focus-within 是表示一个元素或者它的子元素获取焦点时，你可以对该元素进行的操作。

例如，当输入框元素获取焦点时，父元素form可以使用focus-within伪类设置边框属性。

<html>

    <head>
        <style>

            form{
                width: 300px;
                margin: 20px auto;
                background-color: #ccc;
            }

            form:focus-within{
                border: 2px solid blue;
            }
        </style>
    </head>

    <body>

        <form>
            <label>name</label>
            <input type="text" name="name">
            <br>
            <label>age</label>
            <input type="text" name="age">
        </form>

    </body>
</html>

再来看个例子，github的搜索框，当输入框获取焦点时，你会发现整个框会被拉长了，这里就应用到了focus-within 伪类。

github-foucs-within

如何实现呢？

很简单，不需要js代码，核心css代码就是将input的宽度设置成100%，与父容器等宽，当子元素input获得了焦点时，通过父容器.search的伪类focus-within让宽度拉长就好了。

<html>

<head>
    <style>
        .container {
            margin: 20px auto;
            max-width: 1200px;
            background-color: #24292e;
            padding: 1em;
        }

        .search {
            max-width: 200px;
        }

        .search:focus-within {
            max-width: 470px;
        }

        input {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="search">
            <input type="text">
        </div>
    </div>
</body>

</html>

github-foucs-within2

是不是很简单

关注公众号「Python之禅」，回复「1024」免费获取Python资源

理解 focus-within 伪类

猜你喜欢