为什么提交按钮的颜色变得奇怪？

Question

这是提交按钮的默认颜色,没有任何特定样式.(使用铬)

在此输入图像描述

这是使用它后的那个按钮input[type="submit"]{border-radius: 2px;}.

在此输入图像描述

当你看到第二个的颜色时,没有任何特殊原因突然改变,你也可以在边框的右边和底边看到阴影.(body{direction:rtl;})

什么原因？我只需要一个带圆边框的默认按钮(不再有).有什么解决方案吗？或者我应该用这个图像？

Answer 1

常规的,没有样式的按钮是系统UI元素(或者在Chrome的情况下,是自定义的).因此,它可能没有CSS等价物.因此,当您尝试设置按钮样式时,它会恢复为可以设置样式的普通按钮,但恰好有不同的颜色.

您将不得不完全接管并指定按钮的每个部分以获得类似的回顾(即使您这样做,使用系统默认按钮的Firefox用户也会受到冲击).如果您喜欢这种外观,这里是如何在某种程度上复制它(演示):

border: thin solid gray;
border-radius: 2px;
padding: 2px 4px;
background-image: linear-gradient(white, lightgray);

且不说:hover和:active状态的造型.为什么不借此机会想出一个适合您页面的漂亮定制外观？