Chrome 83 表单元素样式

Avatar of Chris Coyier
Chris Coyier 发布

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费信用额度!

从 Chrome 83 开始,表单元素的外观发生了一些美学变化。任何带有渐变颜色的元素都消失了(特别是额外闪亮的 <meter> 元素)。整体的一致性非常好,尤其是在输入框和文本区域之间。我不太喜欢新的 <select> 样式,但我听说很多可访问性研究都投入到了这里,所以很难抱怨——而且你也可以随时 更改它

Hakim 发布了一条不错的对比推文

WordPress 的 Jetpack 插件有一个 新的比较块,我将在这里尝试一下。您可以随意在项目之间滑动(拖动中间的滑块)。

这并没有伴随着新的标准化方式来使用 CSS 更改表单元素的外观,尽管浏览器意识到了这一点,并且似乎越来越接近。我相信这是朝着这个方向迈出的一步。

我还看到有一个新的 <input type="time">。旧版本看起来像这样,并且没有提供任何 UI 控件

现在我们得到了这个带有控件的“野兽”

没有视觉指示器或按钮,但您可以滚动这些列。

Reddit 指出它使用了与日期选择器相同的伪元素,因此如果您想将其删除,您可以将其范围限定为这些类型的输入(或不限定)并将其删除。

input[type="time"]::-webkit-calendar-picker-indicator {
  display: none;
}

我认为这是一个改进(我喜欢 UI 控件),但它确实继续突出了能够对这些内容进行样式设置的必要性,特别是如果目标是让人们实际使用它们而不是(糟糕地)重新构建它们。