input[type="text"]的:hover样式无效是因为浏览器将表单控件视为原子控件，原生外观限制了伪类响应；需加appearance: none并设置border、background等可变属性才能生效。
input[type="text"] 的 hover 样式为什么没反应？
因为默认状态下，<input type="text"> 在多数浏览器中不支持 :hover 伪类的视觉反馈（尤其在未获得焦点时），不是写法错，而是浏览器对表单控件的渲染限制——它把输入框当作“原子控件”，部分样式被系统主题接管。
真正起效的前提是：必须显式覆盖其原生外观。常见做法是加 appearance: none; 或 -webkit-appearance: none;，并确保有可响应的尺寸和背景（比如设了 border 或 background）。
- 仅写
input:hover { border-color: red; }可能无效，尤其在 Safari 或旧版 Chrome - 需配合
border、outline、background等可变属性一起使用 - 若用了
outline: none且未提供替代聚焦样式，会损害可访问性
如何让 input 文本框 hover 时显示边框高亮？
核心是用 CSS 覆盖默认渲染，并控制 border 和 transition 实现平滑效果。以下是最小可行配置：
input[type="text"] {
border: 2px solid #ccc;
background: #fff;
padding: 6px 12px;
-webkit-appearance: none;
appearance: none;
transition: border-color 0.2s ease;
}
input[type="text"]:hover {
border-color: #007bff;
}
input[type="text"]:focus {
outline: none;
border-color: #0056b3;
}
注意：transition 必须写在基础状态（非 hover），否则首次悬停无动画；padding 不能省略，否则文字可能贴边或被截断。
hover 效果在移动端是否生效？
基本不生效。移动端没有“悬停”概念，:hover 在触摸设备上通常只在模拟鼠标指针的短暂时刻触发（如 Safari 桌面版切到响应式模式），真实手机和平板几乎不会响应。
- 不要依赖
:hover做关键交互提示（比如“悬停才显示帮助图标”） - 若需类似反馈，改用
:focus+:active组合，或监听touchstart/touchend - 某些安卓 WebView 会将第一次点击视为“伪 hover”，但行为不可靠，不建议适配
IE 浏览器下 input hover 样式兼容要点
IE10+ 支持 :hover 于 input，但 IE9 及更早版本完全不支持，且不识别 appearance 属性。若仍需兼容 IE9，只能退化处理：
- 放弃 hover 动画，改用
:focus做唯一状态反馈 - 避免使用
appearance，IE 下该属性会被忽略，但也不会报错 - 若必须 hover 效果，需 JS 监听
mouseenter/mouseleave并切换 class
现在绝大多数项目已放弃 IE9 支持，但如果你维护老系统，这点容易漏测。
真正难的不是写对样式，而是判断哪些设备、哪些状态、哪些辅助技术会绕过你写的 hover —— 它从来就不是个稳定可靠的交互信道。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
