html css输入框获得焦点、失去焦点效果
warning:
这篇文章距离上次修改已过190天，其中的内容可能已经有所变动。
在HTML和CSS中，可以使用:focus伪类选择器来为输入框在获得焦点和失去焦点时添加样式效果。以下是一个简单的例子：
HTML:
<input type="text" class="input-field" placeholder="点击这里输入内容...">CSS:
/* 输入框正常状态样式 */
.input-field {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
outline: none; /* 去掉默认的点击边框 */
transition: border-color 0.3s; /* 平滑过渡边框颜色变化 */
}
/* 输入框获得焦点时的样式 */
.input-field:focus {
border-color: #4A90E2;
}在这个例子中，当输入框获得焦点时，边框会变成蓝色，失去焦点时，边框颜色会平滑地变回原来的灰色。transition属性用于实现平滑的颜色变化效果。
评论已关闭