CSS 之选择器（十一）:focus-within

往期链接： 「[CSS 之选择器](https://juejin.cn/post/7030821090427404302)」 「[CSS 之选择器（二）](https://juejin.cn/post/7031093999117008927)」 「[CSS 之选择器（三）](https://juejin.cn/post/7031474380278497310)」 「[CSS 之选择器（四）](https://juejin.cn/post/7031919936159088671)」 「[CSS 之选择器（五）](https://juejin.cn/post/7032217236106543111)」 「[CSS 之选择器（六）::before 和::after](https://juejin.cn/post/7032590551840981028)」 「[CSS 之选择器（七）:empty](https://juejin.cn/post/7033004239446573093)」 「[CSS 之选择器（八）：+ 和 ~](https://juejin.cn/post/7033402406012452877)」 「[CSS 之选择器（九）:valid 和:invalid](https://juejin.cn/post/7033740684741836836)」 「[CSS 之选择器（十）`<label> 和 <input>`](https://juejin.cn/post/7034128938716954661)」 # 前言 有些时候，当我们在填写表单的时候，输入框聚焦的时候需要做一些操作，输入框失去焦点的时候也要做一些操作。而这些我们也可以通过 CSS 来实现。接下来就让我们介绍一下:focus-within 这个选择器。 # :focus-within `:focus-within`：作用当前表单节点处于聚焦状态下的节点。它监听当前节点里是否有表单节点，且该表单节点是否处于聚焦状态。 接下来我们就通过这个选择来实现一些操作。 # 代码实现 效果如如下：  代码如下： ```html <div page> <form class="bubble-distribution"> <h3>Register</h3> <div class="accout"> <input type="text" placeholder="请输入手机或邮箱" pattern="^1[3456789]\d{9}$|^[\w-]+(.[\w-]+)*@[\w-]+(.[\w-]+)+$" required> <img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-assets/v3/static/img/greeting.1415c1c.png~tplv-t2oaga2asx-image.image"> </div> <div class="password"> <input type="password" placeholder="请输入密码(6 到 20 位字符)" pattern="^[\dA-Za-z_]{6,20}$" required> <img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-assets/v3/static/img/blindfold.58ce423.png~tplv-t2oaga2asx-image.image"> </div> <div class="code"> <input type="text" placeholder="请输入邀请码(6 位数字)" pattern="^[\d]{6}$" maxLength="6" required> <button type="button">Proving</button> <img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-assets/v3/static/img/greeting.1415c1c.png~tplv-t2oaga2asx-image.image"> </div> <img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-assets/v3/static/img/normal.0447fe9.png~tplv-t2oaga2asx-image.image"> <ul> <li> <input id="male" type="radio" name="sex"> <label for="male">Mr</label> </li> <li> <input id="female" type="radio" name="sex"> <label for="female">Ms</label> </li> </ul> <button type="button">Create</button> </form> </div> ``` ```css [page] { display: flex; justify-content: center; padding: 100px; background-color: rgba(0, 0, 0, 0.7); } .bubble-distribution { position: relative; margin-top: 50px; padding: 25px; border-radius: 2px; width: 320px; background-color: #fff; h3 { font-size: 16px; color: #333; } div { display: flex; margin-top: 10px; } img { position: absolute; left: 50%; bottom: 100%; width: 120px; margin: 0 0 -20px -60px; } ul { display: flex; justify-content: space-between; align-items: center; height: 30px; margin-top: 10px; line-height: 30px; } li { position: relative; width: 45%; transition: all 300ms; &:focus-within { background: linear-gradient(90deg, #09f 50%, transparent 0) repeat-x, linear-gradient(90deg, #09f 50%, transparent 0) repeat-x, linear-gradient(0deg, #09f 50%, transparent 0) repeat-y, linear-gradient(0deg, #09f 50%, transparent 0) repeat-y; background-position: 0 0, 0 100%, 0 0, 100% 0; background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px; animation: move 500ms infinite linear; } } input[type=text], input[type=password] { flex: 1; height: 40px; padding: 0 10px; border: 1px solid #e9e9e9; border-radius: 2px; outline: none; transition: all 300ms; &:focus:valid { border-color: #09f; } &:focus:invalid { border-color: #f66; } } input[type=radio] { position: absolute; width: 0; height: 0; &:checked + label { border: 3px solid transparent; background-color: #09f; color: #fff; } } label { display: block; text-align: center; border-bottom: 1px solid #ccc; background-clip: padding-box; cursor: pointer; transition: all 300ms; } button { overflow: hidden; width: 100%; height: 40px; margin-top: 10px; border: none; border-radius: 2px; outline: none; color: #fff; background-color: #09f; cursor: pointer; transition: all 300ms; } .accout, .password, .code { img { display: none; margin-bottom: -27px; } &:focus-within { img { display: block; } & ~ img { display: none; } } } .code { display: flex; justify-content: space-between; button { margin-top: 0; padding: 0; } input { &:not(:placeholder-shown) { width: 70%; & + button { width: 25%; } } &:placeholder-shown { width: 100%; & + button { width: 0; opacity: 0; } } } } } @keyframes move { to { background-position: 6% 0, -6% 100%, 0 -6%, 100% 6%; } } ``` 好，今天就到这里了，今天努力的你依然是最棒的，Bye Bye！！！