Safari 加载按钮很奇怪答案

【问题标题】：Safari loading buttons weirdSafari 加载按钮很奇怪
【发布时间】：2021-09-18 06:43:06
【问题描述】：

我最近构建了一个应用程序，但在部署之后，我注意到 Safari 加载 css 的方式似乎有所不同。我到处都有一个 type="button"，safari 在元素周围添加了一个奇怪的白色框。看起来很可怕。我在互联网上环顾四周，发现了这个：

input[type="text"],
input[type="button"] {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

这是我找到解决方案最接近的方法，但它不起作用。

网站：timetrackers.net

【问题讨论】：

注意：我刚刚注意到 CSS 只影响 type="button" 的输入。我只是将类型用于我想像按钮一样操作的各种元素，而没有该按钮的外观

标签： html css safari

【解决方案1】：

我猜你说的是 Safari 的默认 :focus 样式。

你可以使用这个 CSS 来摆脱它：

input[type="text"]:focus,
input[type="button"]:focus {
    outline-width: 0;
}

【讨论】：

不完全。我会发布一些图片，以便您看得更清楚。