从 Chrome 83 开始,表单元素的外观发生了一些美学变化。任何带有渐变颜色的元素都消失了(特别是额外闪亮的 <meter> 元素)。整体的一致性非常好,尤其是在输入框和文本区域之间。我不太喜欢新的 <select> 样式,但我听说很多可访问性研究都投入到了这里,所以很难抱怨——而且你也可以随时 更改它。
Hakim 发布了一条不错的对比推文
Chrome 的新默认表单样式出来了 👀 pic.twitter.com/Pr6qi1LpPn
— Hakim El Hattab (@hakimel) 2020年5月26日


这并没有伴随着新的标准化方式来使用 CSS 更改表单元素的外观,尽管浏览器意识到了这一点,并且似乎越来越接近。我相信这是朝着这个方向迈出的一步。
我还看到有一个新的 <input type="time">。旧版本看起来像这样,并且没有提供任何 UI 控件

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

Reddit 指出它使用了与日期选择器相同的伪元素,因此如果您想将其删除,您可以将其范围限定为这些类型的输入(或不限定)并将其删除。
input[type="time"]::-webkit-calendar-picker-indicator {
display: none;
}
我认为这是一个改进(我喜欢 UI 控件),但它确实继续突出了能够对这些内容进行样式设置的必要性,特别是如果目标是让人们实际使用它们而不是(糟糕地)重新构建它们。
当聚焦一个元素时,现在它显示一个粗黑的轮廓,看起来很丑。
我也不喜欢。旧的橙色还可以,因为它应该突出(并且人们习惯了它)。
我最初以为这是我的样式问题……
我想作为一种观点,这很好。我个人很喜欢,尽管我完全理解有些人可能不喜欢。
我认为从可访问性的角度来看,它也是一个不错的起点;而且我相信是由微软贡献并进行了研究的。
也就是说,如果您的网站有不同的主题,我可能会觉得它令人惊讶和意外。例如,在 css-tricks.com 上使用 Chrome 键入此评论时,用于评论订阅选项的复选框使用蓝色,与深色/橙色主题完全冲突,并且根据我在这里的其他评论,似乎无法在 CSS 中更改实际的原生控件本身(无需进行更多替换技巧,这对于大型网站来说可能并不容易)
除了复选框/单选按钮之外,我认为焦点样式都可以在 CSS 中更改,对于某些网站,我认为我会保留原样。
不错的文章。我也不太喜欢新的选择框。
快速说明:您可以在这里可视化所有 html 元素。
https://devansvd.github.io/html-elements/
感谢这篇文章。我认为总体上的可访问性改进很棒。我认为它始于微软的贡献?在 Edge 中,单选/复选框样式为黑色,但在 Chrome 中为蓝色,这很遗憾可能会与某些网站主题冲突,而且如果我没有记错的话,很难更改原生样式?虽然我知道您可以隐藏原生复选框或单选按钮并使用图标或任何内容以及 checked 选择器,但这对于表单繁多的大型应用程序来说可能难以快速地进行改造。
题外话:如果您想比较非常相似的事物,例如具有不同质量设置的图像,那么此比较滑块块肯定很有用。在这种情况下,它使比较变得相当困难
在白色背景下不容易看到滑块,您无法轻松地关联哪些表单元素来自哪个 Chrome 版本,而且您永远不会同时看到两个版本。
一张简单地并排显示两个版本的图像会做得更好。抱歉,如果这听起来很苛刻或不友好。我明白您只是想玩玩它。
喜欢这个可滑动的比较块!终于有理由离开我 RSS 阅读器的舒适区了
为什么是默认日历?为什么?
你好,我们现在如何为输入范围组件的新下部设置样式?
谢谢