[分享]css3搜索框后面有x号的

CSS3搜索框后面加上x号是一种常见的设计。这种设计可以为用户提供删除关键字的功能，提高搜索框的易用性。/ 添加x号的样式 / .searchbox{ : relative; } .searchbox...

CSS3搜索框后面加上x号是一种常见的设计。这种设计可以为用户提供删除关键字的功能，提高搜索框的易用性。

/* 添加x号的样式 */
.search-box{
  position: relative;
}
.search-box .clear-btn{
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #eee;
  text-align: center;
  font-size: 12px;
  line-height: 16px;
  cursor: pointer;
} 

可以看到，在搜索框的容器上添加了相对定位，然后在容器内部添加了一个绝对定位的x号按钮，使用了top、right和transform属性进行定位，并设置了背景色、文本居中以及cursor属性。

同时，在JavaScript中添加点击事件，实现点击x号按钮时能够清空搜索框中的内容。

/* 点击x号清空搜索框 */
var clearBtn  = document.querySelector('.clear-btn');
var input = document.querySelector('.search-box input');

clearBtn.addEventListener('click', function(){
  input.value = '';
}); 

可以看到，通过querySelector方法获取x号按钮和搜索框input元素，然后为按钮添加点击事件，清空搜索框中的内容。

总的来说，CSS3搜索框后面加上x号不仅能够提高搜索框的易用性，还能够让页面更加美观。完美融合CSS3和JavaScript，提升用户体验，为网站设计带来便捷和高效。