html css输入框获得焦点、失去焦点效果

作者：System 时间：2024年08月15日分类：所有,css3 字数：515

这篇文章距离上次修改已过267天，其中的内容可能已经有所变动。

在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属性用于实现平滑的颜色变化效果。

html css输入框获得焦点、失去焦点效果

评论已关闭

推荐阅读