CSS中focus
在CSS中，:focus 是一个伪类，用于选择当前获得焦点的元素。通常，表单元素（如输入框、按钮、链接等）在用户与之交互时会获得焦点。通过 :focus 伪类，可以为这些元素在获得焦点时应用特定的样式，从而提升用户体验。
- 基本用法
:focus 伪类可以应用于任何可以接收焦点的元素，例如 <input>、<button>、<a> 等。
示例：
input:focus {
border-color: blue;
outline: none; /* 移除默认的浏览器轮廓 */
box-shadow: 0 0 5px rgba(0, 0, 255, 0.5); /* 添加阴影效果 */
}
HTML：
<input type="text" placeholder="Enter your name">
效果：
- 当用户点击输入框时，输入框会获得焦点，并应用
:focus样式。
- 移除默认的
outline
浏览器通常会为获得焦点的元素添加一个默认的 outline（轮廓）。如果你想要自定义焦点样式，可以使用 outline: none 移除默认轮廓。
示例：
button:focus {
outline: none;
background-color: #4CAF50;
color: white;
}
HTML：
<button>Click Me</button>
- 结合
:hover和:active
可以将 :focus 与其他伪类（如 :hover 和 :active）结合使用，创建更丰富的交互效果。
示例：
a:focus, a:hover {
color: red;
text-decoration: underline;
}
button:active {
background-color: darkgreen;
}
- 为自定义元素添加焦点样式
如果你使用 <div> 或其他非表单元素模拟交互（如自定义按钮），可以通过添加 tabindex 属性使其能够接收焦点，然后使用 :focus 伪类。
示例：
.custom-button {
padding: 10px 20px;
background-color: #f1f1f1;
border: 1px solid #ccc;
cursor: pointer;
}
.custom-button:focus {
background-color: #4CAF50;
color: white;
}
HTML：
<div class="custom-button" tabindex="0">Custom Button</div>
:focus-within伪类
:focus-within 是一个更强大的伪类，它匹配包含焦点元素的父元素。这在表单组或复杂组件中非常有用。
示例：
.form-group:focus-within {
border: 2px solid blue;
}
HTML：
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name">
</div>
效果：
- 当输入框获得焦点时，整个
.form-group容器会应用样式。
:focus-visible伪类
:focus-visible 用于在元素通过键盘操作（如按Tab键）获得焦点时应用样式，而鼠标点击时不应用。这可以避免不必要的焦点样式。
示例：
button:focus-visible {
outline: 2px solid blue;
}
HTML：
<button>Click Me</button>
效果：
- 当用户通过键盘导航到按钮时，按钮会显示蓝色轮廓；通过鼠标点击时不会显示。
- 结合过渡动画
可以为焦点状态添加过渡效果，使样式变化更平滑。
示例：
input {
border: 1px solid #ccc;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
input:focus {
border-color: blue;
box-shadow: 0 0 5px rgba(0, 0, 255, 0.5);
}
- 常见应用场景
- 表单输入框：为输入框添加焦点样式，提升用户体验。
- 导航菜单：为键盘导航的链接添加焦点样式。
- 自定义组件：为可交互的自定义元素（如按钮、卡片）添加焦点样式。
总结
:focus 伪类是CSS中用于增强用户交互的重要工具。通过合理使用 :focus、:focus-within 和 :focus-visible，可以为用户提供清晰的视觉反馈，提升可访问性和用户体验。
更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github
