17370845950

使用:focus伪类和border属性可实现表单输入框聚焦效果，如边框变色、加粗及添加阴影动画，提升交互体验。

在CSS初级项目中，实现表单输入框的聚焦效果主要依赖于 :focus 伪类和 border 属性的结合使用。当用户点击输入框（即获得焦点）时，通过样式变化提示当前正在输入的位置，提升用户体验。

理解 :focus 伪类

:focus 是一个常用的伪类选择器，用于选中用户正在操作（如点击或按 Tab 键进入）的表单元素。常见应用于 input、textarea 等可输入控件。

例如，让输入框在聚焦时边框变蓝：

input:focus {
    border: 2px solid blue;
    outline: none; /* 去除默认轮廓线，自定义更美观 */
}

利用 border 控制边框样式

border 属性可以设置边框的宽度、样式和颜色。配合 :focus 使用，能清晰地展示输入状态。

常用 border 样式示例：

• solid：实线边框，最常用
• dashed：虚线边框，适合强调但不突兀
• none 或 0：无边框，可用于重置

比如实现“聚焦时边框加粗并变为绿色”：

input {
    border: 1px solid #ccc;
    padding: 8px;
    transition: border 0.3s ease; /* 添加过渡动画更自然 */
}

input:focus {
    border: 2px solid green;
    outline: none;
}

增强视觉效果的小技巧

为了让聚焦效果更友好，可以结合其他 CSS 属性一起使用：

• transition：添加边框变化的过渡动画，避免突兀
• box-shadow：配合内阴影或外阴影增强立体感，例如模拟“发光”效果
• background-color：轻微改变背景色，进一步提示当前输入区域

示例：带发光效果的聚焦样式

input:focus {
    border: 2px solid #40a9ff;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
    transition: all 0.3s ease;
}

基本上就这些。掌握 :focus 和 border 的基本用法后，你可以根据设计需求灵活调整颜色、粗细和动画效果，让表单交互更直观自然。不复杂但容易忽略细节，比如去掉 outline 后要提供足够的视觉反馈，否则会影响可访问性。