「这是我参与11月更文挑战的第二十三天，活动详情查看：2021最后一次更文挑战」。

往期链接：

「CSS之选择器」

「CSS之选择器（二）」

「CSS之选择器（三）」

「CSS之选择器（四）」

「CSS之选择器（五）」

「CSS之选择器（六）::before和::after」

「CSS之选择器（七）:empty」

「CSS之选择器（八）：+ 和 ~」

「CSS之选择器（九）:valid和:invalid」

「CSS之选择器（十）<label> 和 <input>」

前言

有些时候，当我们在填写表单的时候，输入框聚焦的时候需要做一些操作，输入框失去焦点的时候也要做一些操作。而这些我们也可以通过CSS来实现。接下来就让我们介绍一下:focus-within这个选择器。

:focus-within

:focus-within：作用当前表单节点处于聚焦状态下的节点。它监听当前节点里是否有表单节点，且该表单节点是否处于聚焦状态。

接下来我们就通过这个选择来实现一些操作。

代码实现

效果如如下：

代码如下：

<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>

[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！！！