css focus

作者：终生卟离发布日期:2025-05-11 浏览:111

/* 当元素获得焦点时，应用特定样式 */
input:focus {
    border: 2px solid blue;
    outline: none;
}

/* 当按钮获得焦点时，改变背景颜色 */
button:focus {
    background-color: lightgreen;
}

/* 当链接获得焦点时，添加下划线 */
a:focus {
    text-decoration: underline;
}

解释说明：

:focus 是一个 CSS 伪类，用于选择当前获得焦点的元素。当用户通过键盘导航（例如使用 Tab 键）或点击元素时，该元素会获得焦点。
在示例代码中：
- 当 <input> 元素获得焦点时，边框变为蓝色，并且移除了默认的轮廓线。
- 当 <button> 元素获得焦点时，背景颜色变为浅绿色。
- 当 <a> 链接获得焦点时，文本下方会显示下划线。

上一篇：css大小自适应

下一篇：css字间距怎么设置