如何阻止Safari为Ionic App iframe内按钮添加-apple-system-blue样式

Safari在iframe环境下会自动给button和select元素注入默认的蓝色文字样式，你可以通过以下几种方式解决：

• 强制覆盖样式（最简单直接）
  给目标元素写更高优先级的CSS规则，直接覆盖Safari的默认样式。如果原有样式优先级不够，可以临时用!important（尽量少用，优先通过更具体的选择器提升优先级）：

  button, select {
    color: #333 !important; /* 替换成你需要的颜色 */
    /* 按需添加其他样式，比如背景色、边框等 */
  }
  

  比如如果按钮有特定类名，用.custom-btn这样的选择器，就不需要!important：

  .custom-btn {
    color: #333;
  }
  

• 重置浏览器默认表单样式
  使用-webkit-appearance属性彻底重置表单元素的默认样式，避免浏览器自动注入样式：

  button, select {
    -webkit-appearance: none;
    appearance: none;
    color: #333; /* 设置你的目标颜色 */
    /* 手动补充必要样式，比如边框、内边距，保证元素正常显示 */
    border: 1px solid #ddd;
    padding: 8px 12px;
    border-radius: 4px;
  }
  

  注意：这个方法会清除所有浏览器默认样式，需要自己补全视觉样式。

• 同域iframe的父页面控制
  如果iframe加载的是同域网站，可以在Ionic的全局样式中直接指定iframe内的元素样式：

  iframe#your-iframe-container button,
  iframe#your-iframe-container select {
    color: #333;
  }
  

  要是跨域的话，只能在被加载的网站本身添加上述CSS规则，父页面无法修改跨域iframe内的样式。

内容的提问来源于stack exchange，提问作者Raphaël Balet