无法更改HTML表单提交按钮的字体大小

Question

如何增加提交按钮字体大小？特别是在chrome中，它太小了，文本看起来很压扁。 Working fiddle

body, input {
    font-size: 30px; 
}

我知道有

-webkit-appearance: none;

但这会重置很多其他造型。我想保留默认样式，只是使用不同的字体大小。

Answer 1

我遇到了类似的问题，但是当我将样式内联在输入元素中时，它正在工作。所以其他一些造型可能会导致问题。

 <input type="submit" value="Register" style = "font-size:20px">

Answer 2

如果设置border或box-shadow属性，Webkit将尊重您的自定义表单元素样式（是的，奇怪的）。正如其他人所说，至少从-webkit-appearance: none;（我添加-moz-appearance: none; appearance: none;）开始，然后参考this answer to "HTML select font-size"

Answer 3

使用CSS，我发现使用更具体的选择器解决了这个问题。而不是使用类或类型选择器：

button {font-size: 1.5em;}

我使用了ID选择器：

\#submit {...}

Answer 4

要更改提交按钮的字体大小，只需使用此css代码：

input[type=submit] {
    font-size: 0.5em;
}

示例：http://jsfiddle.net/xhf4bLnd/4/

编辑：将px更改为em

Answer 5

我这样做并且适合我：

<font size="5">
   <input type="submit" value="Submit">
</font>

Answer 6

将类添加到提交按钮HTML，并在css中的该类中覆盖标准字体大小。

你也可以用CSS2 / 3做一些事情：

input[type=submit]{
font-size:2em;
}

我还建议使用ems作为字体大小而不是px，因为像素在不同设备和不同分辨率下的显示方式不同。比如Retina。

注意：

em是基于正文中设置的字体大小的相对比例，因此如果你的body { font-size:16px; }然后是后来定义的子规则字体大小1.5em，例如输入类型将是1.5 x 16px等。

Answer 7

这对我有用：

input[type=submit] {
    font-size: 1em;
}