纯css实现输入框（input）显示清除按钮

实现效果：当输入框中有文字时，显示一旁删除的小叉

html部分：

<div class="s-input-box">
    <input type="text"  required="required" class="s-input">
    <div class="clear-box"></div>
</div>

required ：提交前必要填写的字段（判断输入框是否有内容）

css部分（scss）：

.s-input-box {
  width: 140px;
  position: relative;
    // 输入框部分
   .s-input {
      position: absolute;
      width: 140px;
      height: 23px;
      border-radius: 3px;
      border: 1px solid #9fa39a;
      cursor: pointer;
    }
    
   // 清除按钮部分
   // 纯css验证输入框是否为空显示清除按钮
  .s-input:valid + .clear-box {
      transition: .4s cubic-bezier(.625,.045,.355,1);
      width: 14px;
      height: 14px;
      background: #cad3c3;
      margin-top: 8px;
      position: absolute;
      right: 0;
      border-radius: 100%;
      
   // 画叉的部分
    &::after {
      width: 8px;
      position: absolute;
      height: 1.5px;
      background: #fff;
      content: "";
      top: 6.5px;
      left: 3.5px;
      transform: rotate(134deg);
      -ms-transform: rotate(134deg);
      -moz-transform: rotate(134deg);
      -webkit-transform: rotate(134deg);
      -o-transform: rotate(134deg);
    }
    &::before {
      width: 8px;
      position: absolute;
      height: 1.5px;
      background: #fff;
      content: "";
      top: 6.5px;
      left: 3.5px;
      transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      -o-transform: rotate(45deg);
    }
  }
}

:valid ：css选择器，如果输入合法则进行的样式的选择

.s-input:valid + .clear-box ：判断class为s-input的元素是否合法（required判断输入框是否有值），如果是就加上清除按钮的样式

注：上述代码复制可直接使用查看效果