CSS如何给具有焦点的输入框改样式_利用:focus伪类选择器-css教程-PHP中文网

最常见的原因是CSS优先级被覆盖或未处理outline，默认光标消失是因对比度不足，应显式设置caret-color；:focus对所有焦点触发，:focus-visible仅限键盘导航，box-shadow比border更优且需加transition。

css如何给具有焦点的输入框改样式_利用:focus伪类选择器

input:focus 为什么没生效

最常见的原因是 CSS 优先级被覆盖，比如框架或重置样式里写了 input:focus 但后面又用更具体的选择器（如 .form-control:focus）重写了，或者用了 !important 锁死默认行为。另一个高频坑是：没给 input 设置 outline: none 就直接改边框，结果浏览器默认 outline 还在闪，新样式被盖住。

先检查开发者工具里 :focus 规则是否被划掉（表示未生效）
确保选择器足够具体，例如用 input[type="text"]:focus 比单纯 input:focus 更稳
如果要去掉默认轮廓，必须显式写 outline: none，但别忘了加替代焦点指示（比如 box-shadow），否则可访问性出问题

:focus 和 :focus-visible 的区别在哪

:focus 只要元素获得焦点就触发，不管怎么触发的（鼠标点、Tab 键、JS 调用 .focus() 都算）；:focus-visible 是现代浏览器才支持的伪类，只在“明显是键盘导航触发焦点”时才匹配——比如用户按 Tab 进入输入框，它会生效；但鼠标点击时通常不生效。这对兼顾可访问性和体验很关键。

想统一所有焦点状态，用 :focus
想只优化键盘用户的视觉反馈（避免鼠标党看到突兀高亮），优先用 :focus-visible
注意兼容性：:focus-visible 在 Safari 15.4+、Chrome 86+、Firefox 87+ 支持，旧版本需回退到 :focus
可以组合写：input:focus:not(:focus-visible) { outline: none; }，让鼠标点击时不显示焦点环，但键盘操作仍保留

改边框颜色后光标不见了怎么办

不是光标真没了，而是当 input 的 color（文字色）和背景色对比度太低，或者用了透明/浅色边框时，系统默认光标颜色（通常是黑色或白色）可能被“吃掉”。尤其在深色主题下容易发生。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

显式设置 caret-color，比如 caret-color: #007bff;
别只改 border-color，顺手加上 background-color 和 color，保证文本可读
移动端 iOS Safari 对 caret-color 支持较晚（iOS 15.4+），老版本只能靠调整 color 和背景反差来缓解

用 box-shadow 做焦点效果更靠谱吗

比单纯改 border 更灵活，也更容易避免布局偏移（border 宽度变化会触发重排，box-shadow 不会）。而且能做出内阴影、多层阴影、平滑过渡等效果，视觉上更现代。

推荐写法：box-shadow: 0 0 0 2px rgba(0, 123, 191, 0.25);（外发光）或 inset 0 0 0 2px #007bff;（内发光）
务必搭配 transition: box-shadow 0.15s ease-in-out;，不然焦点切换太生硬
注意不要把 box-shadow 写太宽，否则在小屏幕或缩放时会溢出容器，影响可访问性宽度检测

焦点样式看着简单，真正上线前得在键盘导航、暗色模式、缩放 200%、屏幕阅读器环境下都过一遍——很多 bug 不是代码写错，是只在鼠标+默认设置下测了。