给input框加一个鼠标点击变换颜色的css代码

您可以使用CSS中的`:focus` 伪类来实现鼠标点击input框时变换颜色的效果。以下是一个示例CSS代码：

input:focus {
  outline: none; /* 取消默认的外边框样式 */
  border-color: #7c7cff; /* 修改输入框边框颜色 */
  box-shadow: 0 0 5px #7c7cff; /* 添加阴影效果 */
}

当用户点击input框时，输入框将失去默认的外边框样式，并将边框颜色和阴影效果修改为您所设定的颜色。您可以根据需要修改颜色和阴影效果的数值。

相关问题

给input框加一个鼠标点击变换颜色并清除value值的css代码

您可以使用CSS中的`:focus` 伪类来实现鼠标点击input框时变换颜色的效果，并使用JavaScript来清除input框的value值。以下是一个示例代码：

<input type="text" id="myInput">

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;
}

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属性值。