给input框加一个鼠标点击变换颜色并清除value值的css代码
时间: 2024-03-07 07:48:53 浏览: 61
您可以使用CSS中的`:focus` 伪类来实现鼠标点击input框时变换颜色的效果,并使用JavaScript来清除input框的value值。以下是一个示例代码:
```html
<input type="text" id="myInput">
```
```css
input:focus {
outline: none; /* 取消默认的外边框样式 */
border-color: #7c7cff; /* 修改输入框边框颜色 */
box-shadow: 0 0 5px #7c7cff; /* 添加阴影效果 */
}
/* 隐藏清除按钮 */
input::-ms-clear,
input::-ms-reveal {
display: none;
}
input::-webkit-clear-button {
display: none;
}
```
```javascript
const myInput = document.getElementById("myInput");
myInput.addEventListener("focus", function() {
this.style.borderColor = "#7c7cff";
this.style.boxShadow = "0 0 5px #7c7cff";
this.value = "";
});
```
当用户点击input框时,输入框将失去默认的外边框样式,并将边框颜色和阴影效果修改为您所设定的颜色。同时,JavaScript代码将清除input框中的value值。另外,CSS代码中的`::-ms-clear`和`::-webkit-clear-button`选择器用于隐藏默认的清除按钮。您可以根据需要修改颜色和阴影效果的数值,以及输入框的id属性值。
阅读全文