css3 输入框右边清除

CSS3输入框右边的清除功能是指在一个输入框的右侧添加一个清除按钮，当用户输入内容之后，就可以通过点击该按钮来清除输入框中的内容，让用户方便地重新开始输入。如果您希望为您的网站增加这种方便的功能，那么可以使用CSS3的一些新属性来轻松实现这个效果。

首先，我们需要为清除按钮定义样式，比如背景颜色、边框样式等。可以使用以下代码：

.clear-btn {
    background-color: #fff;
     /* 背景颜色设为白色 */border: 1px solid #ccc;
     /* 添加边框 */border-radius: 50%;
     /* 将按钮样式设为圆形 */cursor: pointer;
     /* 将光标设为手型 */display: none;
     /* 初始情况下隐藏按钮 */height: 20px;
     /* 设置按钮的高度 */width: 20px;
     /* 设置按钮的宽度 */position: absolute;
     /* 将按钮设置为绝对定位，以便调整其位置 */top: 50%;
     /* 将按钮设为输入框的垂直居中 */right: 10px;
     /* 将按钮设置为右侧距离输入框的距离为10px */transform: translateY(-50%);
 /* 将按钮的位置上移50% */}

然后，我们需要使用CSS伪元素来为清除按钮添加图标，这里我们使用了Font Awesome图标库的删除图标，代码如下：

.clear-btn::before {
    content: "\f00d";
     /* 添加Font Awesome的删除图标 */font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 14px;
    color: #aaa;
     /* 将图标颜色设为灰色 */position: absolute;
     /* 将图标设为绝对定位，以便调整其位置 */top: 50%;
     /* 将图标设为垂直居中 */left: 50%;
     /* 将图标设为水平居中 */transform: translate(-50%, -50%);
 /* 将图标的位置居中 */}
    

最后，我们需要使用JavaScript来为清除按钮添加点击事件，以便清除输入框中的内容。可以使用以下代码：

var input = document.querySelector("input[type='text']");
     /* 获取输入框元素 */var clearBtn = document.querySelector(".clear-btn");
 /* 获取清除按钮元素 */input.addEventListener("input", function() {
    if(input.value.length >
 0) {
    clearBtn.style.display = "block";
 /* 显示清除按钮 */}
 else {
    clearBtn.style.display = "none";
 /* 隐藏清除按钮 */}
}
    );
clearBtn.addEventListener("click", function() {
    input.value = "";
     /* 清空输入框中的内容 */clearBtn.style.display = "none";
 /* 隐藏清除按钮 */}
    );
    

设置完以上属性和事件之后，就可以在您的输入框中添加清除按钮了。这个功能能够帮助用户更方便地进行搜索或输入，优化用户体验，也为您的网站增加了一些现代化的元素。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！