iPhone/Safari浏览器输入框背景色设置问题求助

嘿，我太懂这种Safari搞特殊的憋屈感了！iOS上的Safari对表单元素的默认样式管控特别严，有时候哪怕加了!important都顶不住，我之前踩过一模一样的坑，给你几个靠谱的解决方案：

1. 先干掉Safari的默认外观 #

Safari会给输入框这类表单元素套上自己的原生样式，直接覆盖你的自定义设置，所以第一步必须重置这个属性：

.searchbox-input {
  /* 重置Safari默认外观，这步是关键！ */
  -webkit-appearance: none;
  appearance: none;
  
  /* 然后设置你要的背景和文字颜色 */
  background-color: #fff !important; /* 替换成你需要的背景色 */
  color: #333 !important; /* 替换成你需要的文字色 */
  
  /* 可选：重置边框、内边距，避免默认样式干扰 */
  border: 1px solid #ddd;
  padding: 10px 15px;
}

2. 别漏了聚焦状态的样式 #

点击输入框后的:focus状态，Safari也会有自己的默认样式，必须一起覆盖：

.searchbox-input:focus {
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff !important;
  color: #333 !important;
  
  /* 可选：自定义聚焦时的边框，替换掉Safari默认的高亮框 */
  outline: none;
  border-color: #0066cc;
}

3. 排查父元素的透明属性 #

如果上面的设置还是没用，去看看输入框的父元素有没有设置opacity属性！子元素会继承父元素的透明度，哪怕你给输入框设了不透明也没用。要是父元素有opacity: 0.x，要么把父元素的透明改成用rgba背景色，要么给输入框单独设置opacity: 1（不过后者有时候还是会有问题，优先改父元素）。

4. 动态显示的输入框？强制触发样式重绘 #

你说输入框是点击搜索图标才弹出的，要是用jQuery的show()或者fadeIn()显示的，有时候Safari会懒加载样式，导致设置不生效。可以在显示输入框后加一行代码强制重绘：

$(document).ready(function(){
  var submitIcon = $('.searchbox-icon');
  var inputBox = $('.searchbox-input');
  var searchBox = $('.searchbox'); // 补全你的选择器
  
  submitIcon.click(function(){
    inputBox.show();
    // 强制触发重绘，让样式生效
    inputBox[0].offsetHeight;
    // 顺便可以自动聚焦输入框
    inputBox.focus();
  });
});

最后检查有没有冲突的CSS规则 #

打开Safari的开发者工具（在iPhone上可以通过设置开启Web检查器，然后用Mac的Safari连接调试），看看输入框的样式面板里，你的背景色是不是被划掉了，找到真正覆盖它的规则，把选择器写得更具体一点（比如.search-container .searchbox-input），有时候比!important更靠谱。

内容的提问来源于stack exchange，提问作者allen