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

如果设置了边框或框阴影属性，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;
}

我还建议使用em作为字体大小而不是px，因为不同设备和不同分辨率下的像素会有所不同。例如Retina。

注意：

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

Answer 7

这对我有用：

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

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

7 个答案:

注意：