清除 input 元素聚焦时的边框，可以使用 CSS 的 outline 属性。 将其设置为 none 即可。
input:focus {
outline: none;
}
这个方法简单有效，但需要注意的是，去除轮廓会影响到键盘导航用户的可访问性。 他们依赖视觉上的焦点指示来浏览网页。 因此，最好提供替代的视觉提示。
以下是一些在保持可访问性的前提下，自定义焦点样式的方案：
1. 自定义轮廓样式:
与其完全移除轮廓，不如修改它的样式，使其更符合你的设计。
input:focus {
outline: 2px solid #007bff; /* Example: Blue outline */
outline-offset: 2px; /* Example: Slight offset */
}
你可以调整 outline-color、outline-width、outline-style 和 outline-offset 等属性来实现你想要的效果。
2. 使用阴影模拟轮廓:
可以使用 box-shadow 属性来模拟轮廓效果，并在聚焦时改变阴影样式。
input {
box-shadow: 0 0 0 0 transparent; /* Initial shadow: invisible */
transition: box-shadow 0.3s ease-in-out; /* Smooth transition */
}
input:focus {
box-shadow: 0 0 0 2px #007bff; /* Focus shadow: blue */
}
3. 使用 border 和透明边框:
可以设置一个透明的边框，并在聚焦时改变其颜色。
input {
border: 2px solid transparent;
transition: border-color 0.3s ease-in-out;
}
input:focus {
border-color: #007bff;
}
4. 更高级的自定义样式:
你可以结合以上方法，并使用更高级的 CSS 选择器和伪元素 (例如 ::before 和 ::after) 来创建更复杂的焦点样式。
总结:
虽然 outline: none; 可以快速移除焦点边框，但为了保证可访问性，建议使用自定义样式来替代完全移除。 选择哪种方法取决于你的具体设计需求和可访问性要求。 记住，提供清晰的视觉焦点指示对于键盘用户至关重要。