css输入框点击边框变色

可以使用CSS的:focus伪类来实现输入框在聚焦状态下边框变色的效果。具体方法如下：

input:focus {
  border-color: #007bff; /* 聚焦状态下的边框颜色 */
  outline: none; /* 去掉默认的聚焦状态下的外发光效果 */
}

其中，`:focus`伪类代表输入框在聚焦状态下的样式，`border-color`属性设置输入框的边框颜色，`outline`属性设置去掉默认的聚焦状态下的外发光效果。

相关问题

css中input边框失焦时变色

在CSS中，当`<input>`元素失去焦点（blur事件触发）时，你可以通过改变其`border-color`属性来实现边框颜色的变化。通常的做法是设置一个默认的颜色（例如灰色），然后定义一个`:focus`伪类选择器来指定输入获得焦点时的边框颜色（比如蓝色）。当你想要在失去焦点时变化颜色，可以添加`:not(:focus)`选择器来覆盖默认样式。

示例代码如下：

input {
  border: 1px solid #ccc; /* 默认灰色边框 */
  transition: border-color 0.3s; /* 添加过渡效果，平滑地改变颜色 */
}

input:focus {
  border-color: blue; /* 输入获取焦点时的边框颜色 */
}

input:invalid,
input:not(:focus) {
  border-color: red; /* 失去焦点时的边框颜色 */
}

在这个例子中，如果输入有错误（`:invalid`状态），或者用户离开输入框（失去焦点），边框会变成红色。如果你希望只有在失去焦点时才改变颜色，只需保留`:not(:focus)`部分即可。

点击input时边框变色如何更改

您可以使用CSS的:focus伪类来更改输入框的边框颜色。例如，以下代码将在输入框获得焦点时将边框颜色更改为红色：

input:focus {
  border-color: red;
}

您可以将这个CSS样式添加到您的CSS文件中，或将其添加到您的HTML文件的`<style>`标签中。