优雅增加点击区域之搜索框清除按钮实例页面

展示

代码

• HTML：

  <input id="search" type="search" value="我是初始值" required>
  <label for="search" class="icon-clear"></label>

• CSS：

  input[type="search"] {
      width: 200px; height: 40px;
      padding: 10px 40px 10px 10px;
      border: 1px solid #ccc;
      box-sizing: border-box;
  }
  .icon-clear {
      width: 16px; height: 16px;
      margin: 1px 0 0 -38px;
      border: 11px solid transparent;
      border-radius: 50%;
      background: #999;
      color: white;
      position: absolute;
      visibility: hidden;
  }
  .icon-clear:before {
      content: "×";
  }
  input:valid + .icon-clear { 
      visibility: visible;
  }
  

• JS：

  var eleLabel = document.querySelector('label[for="search"]'),
  eleSearch = document.getElementById('search');
  
  if (eleLabel && eleSearch) {
      eleLabel.onclick = function() {
          eleSearch.value = '';
      };
  }