CSS 焦点样式详解

CSS 焦点样式详解一、焦点样式概述CSS 焦点样式用于定义元素获得焦点时的外观。良好的焦点样式对于可访问性至关重要。1.1 基本语法.element:focus { outline: 2px solid #667eea; outline-offset: 2px; }二、焦点伪类2.1 :focusinput:focus { border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3); }2.2 :focus-within.form-group:focus-within { background: #f7fafc; }2.3 :focus-visiblebutton:focus-visible { outline: 2px solid #667eea; }三、焦点样式属性3.1 outline.element:focus { outline: 2px solid #667eea; outline-offset: 4px; }3.2 box-shadow.element:focus { box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3); }3.3 border.element:focus { border-color: #667eea; border-width: 2px; }四、可访问性考虑4.1 足够的对比度.element:focus { outline: 2px solid #667eea; outline-offset: 2px; }4.2 不要移除焦点样式/* 不好 */ .element:focus { outline: none; } /* 好 */ .element:focus { outline: none; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3); }五、实战案例5.1 自定义焦点样式button { padding: 12px 24px; border: 2px solid #667eea; border-radius: 8px; background: transparent; transition: all 0.3s ease; } button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3); background: rgba(102, 126, 234, 0.1); }5.2 输入框焦点样式input { width: 100%; padding: 12px; border: 2px solid #e2e8f0; border-radius: 8px; transition: border-color 0.3s ease; } input:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2); }5.3 导航焦点样式.nav-link { display: inline-block; padding: 8px 16px; border-radius: 4px; } .nav-link:focus-visible { outline: 2px solid #667eea; outline-offset: 2px; }六、键盘导航6.1 Tab 顺序input typetext tabindex1 input typetext tabindex2 input typetext tabindex36.2 跳过链接a href#main-content classskip-link跳过导航/a main idmain-content !-- 主要内容 -- /main.skip-link { position: absolute; top: -40px; left: 0; background: #667eea; color: white; padding: 8px; z-index: 100; } .skip-link:focus { top: 0; }七、总结焦点样式要点使用 :focus-visible- 区分键盘和鼠标焦点足够的对比度- 确保焦点可见不要移除焦点样式- 保持可访问性提供跳过链接- 帮助键盘用户快速导航合理设计焦点样式可以提高网站的可访问性。