Safari 15及以上版本按钮样式失效、提交按钮文本不显示求助

一、修复自定义样式被Safari默认样式覆盖 #

Safari 15及以上版本会给按钮套上自带的原生样式，直接覆盖自定义CSS。解决核心是重置按钮的原生外观属性：

button {
  /* 新增两行重置原生样式，这是关键 */
  -webkit-appearance: none;
  appearance: none;
  /* 你的原有样式保留 */
  font-size: 40px;
  font-family: typewriter;
  border: 2px solid gray;
  background-color: white;
  cursor: pointer;
  transition: 150ms ease;
  /* 可选：如果还有默认内边距、圆角残留，手动重置 */
  padding: 0.5em 1em;
  border-radius: 0;
}

二、修复表单提交按钮文本默认不显示的问题 #

这个情况是Safari表单验证机制搞的鬼——默认状态下浏览器可能隐藏了按钮文本，仅在验证失败时才显示。强制设置文本样式就能解决：

/* 针对表单提交按钮，强制文本始终可见 */
button[type="submit"] {
  color: inherit; /* 或者直接指定颜色，比如 color: black; */
  opacity: 1;
  visibility: visible;
}

另外也可以排查下全局CSS里有没有visibility: hidden、opacity: 0或者color: transparent这类规则，不小心影响了提交按钮的文本显示。

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