Chrome 默认按钮样式答案

【问题标题】：Chrome default button styleChrome 默认按钮样式
【发布时间】：2011-02-17 16:55:47
【问题描述】：

是否可以在 CSS 中获取默认的 Chrome 按钮样式？

当然很多人会说使用http://pastebin.com/zjkW2cJe 或http://pastebin.com/xKGBZFPg

但我想要这个按钮的 CSS 代码...

【问题讨论】：

有一个有趣的样式属性：-webkit-appearance。谷歌它=）

标签： html css button stylesheet

【解决方案1】：

如果您想要纯 CSS 规则，您可以检查按钮元素并查看“用户代理样式表”条目。

在我的 Chrome 9 中，它们看起来像这样：

input, textarea, keygen, select, button, isindex, datagrid {
margin: 0em;
font: -webkit-small-control;
color: initial;
letter-spacing: normal;
word-spacing: normal;
....... etc. much more

但是，如果您真的想要原生渲染按钮的规则，以便在其他浏览器中渲染相同的按钮，我认为这是不可能的：默认按钮将由浏览器的 UI 甚至底层操作系统渲染。在我的 Windows 7 中，默认按钮如下所示：

据我所知，这种样式不在 CSS 规则中。您必须使用背景图像、边框、圆角等重新构建它。如果您不介意使用 jQuery，jQuery UI 等库对此提供了非常简单的解决方案。

【讨论】：

【解决方案2】：

你想要它们……视觉上的？如果是这样，请检查元素并查看计算的样式。

【讨论】：

【解决方案3】：

在当前 macOS 上的 Chrome 中，它是这样的：

background-image: linear-gradient(to bottom, #e4e4e4, #f7f7f7);
border: 1px solid #afafaf

【讨论】：