input[type="text"] 的 border 和 background 怎么改才生效
直接写 input { background: #f0f0f0; border: 1px solid #ccc; } 大概率没反应——不是代码错，是浏览器默认样式优先级更高，尤其在 Chrome/Firefox 对表单控件做了强 UA 样式保护。
必须用 !important 或提升选择器权重，更稳妥的是加 appearance: none; 剥离原生渲染逻辑：
input[type="text"] {
appearance: none;
-webkit-appearance: none;
background: #fff;
border: 2px solid #4a90e2;
border-radius: 4px;
}- 不加
appearance: none，某些系统（如 macOS Safari）仍会强制渲染灰色背景或圆角 -
border-color改变后，:focus状态常被忽略，记得补上input:focus { outline: none; box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.3); } - IE11 不支持
appearance，但 IE11 本身对 input 样式干预少，可单独用input::-ms-input-placeholder处理兼容
placeholder 文字颜色怎么单独控制
placeholder 是伪元素，不同浏览器前缀不同，只写 ::placeholder 会漏掉旧版 Chrome/Safari/Edge。
必须四合一写全：
立即学习“前端免费学习笔记（深入）”；
input::placeholder {
color: #999;
}
input::-webkit-input-placeholder { color: #999; }
input::-moz-placeholder { color: #999; }
input:-ms-input-placeholder { color: #999; }- Firefox 的
::-moz-placeholder在 focus 状态下仍显示，若想聚焦时隐藏 placeholder，得配合 JS 清空 value 或用opacity控制 - 颜色值别用太浅（如
#eee），对比度不足会被 WCAG 无障碍检测标为不合规 - 不要对 placeholder 做
font-weight: bold，部分 Android WebView 会直接忽略
disabled 状态下输入框颜色为什么改不动
禁用态的 input:disabled 样式受操作系统影响极大：Windows 下常强制灰底+浅灰字，CSS 很难覆盖。
真正能稳定生效的只有两个属性：background-color 和 color，且需加 !important：
input:disabled {
background-color: #f8f9fa !important;
color: #495057 !important;
opacity: 1; /* 防止浏览器自带 opacity 覆盖 */
}-
opacity: 0.6是浏览器默认行为，它会让整个元素变透明，包括边框和文字，所以必须显式设opacity: 1 - 如果用了
appearance: none，disabled 态的圆角/阴影可能异常，建议 disabled 时单独重置border-radius和box-shadow - 某些金融/政企项目要求 disabled 输入框可复制内容，此时不能用
readonly模拟，得靠 JS 监听selectstart事件放开选中
深色模式下 input 颜色怎么自动适配
CSS 媒体查询 @media (prefers-color-scheme: dark) 能识别系统偏好，但 input 的默认深色样式并不可靠——Safari 在 dark 模式下仍给 input 白底，Chrome 则可能给暗灰底。
稳妥做法是主动声明两套主题，并用 class 控制切换：
.form-light input { background: #fff; border-color: #ddd; }
.form-dark input { background: #2d3748; border-color: #4a5568; }
<p>@media (prefers-color-scheme: dark) {
.form-auto input { background: #2d3748; border-color: #4a5568; }
}- 别依赖
:root变量自动切色，因为input无法继承某些 CSS 变量（如color在 disabled 态下失效） - 深色模式下
placeholder颜色容易和背景混在一起，建议用hsla(0,0%,100%,0.5)替代纯白 - 用户手动切换系统主题时，页面不会自动重绘 input 样式，需要监听
prefers-color-scheme媒体查询变化并触发 class 更新
实际改 input 颜色最麻烦的从来不是写几行 CSS，而是各种状态（focus / disabled / invalid / autofill）叠加时的样式冲突，还有 autofill 背景那种顽固的黄色——那个得用 input:-webkit-autofill 单独怼。
