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

Question

如何增加提交按钮的字体大小？特别是在Chrome浏览器中，它太小了，文字看起来很挤。 这里有一个可用的示例

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

我知道这里有一个

标签。

-webkit-appearance: none;

但这会重置很多其他的样式。我希望保留默认样式，只是改变字体大小。

- user429620

---

所发布的代码将字体大小设置为30px。这很荒谬，但它按照定义工作。您需要指定问题是什么，您如何尝试解决它以及您的方法失败的原因。 - Jukka K. Korpela

Answer 1

我遇到了类似的问题，但是当我在输入元素中使用内联样式时，它就可以正常工作。因此，可能是其他某些样式导致了这个问题。

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

- Prajeet Shrestha

Answer 2

如果你设置了边框或者盒子阴影属性，Webkit将会尊重你自定义的表单元素样式（是的，很奇怪）。正如其他人所说，首先至少要设置 -webkit-appearance: none; （我会添加 -moz-appearance: none; appearance: none;）然后参考 这个“HTML select font-size”的答案。

- henry

---

在 Chrome 中，将字体大小放置在内联或链接 CSS 中没有任何作用。添加 webkit-appearance，提交按钮的大小就改变了。 - Ian Ellis

Answer 3

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

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

Example: http://jsfiddle.net/xhf4bLnd/4/

编辑：更改 px 为 em

- Fabian Wennink

---

:p 哈哈，我刚刚注意到了。 - Fabian Wennink

请使用 em 而不是像素。 - Empx

@ChrisEmpx 我知道了，已经改过了 :) - Fabian Wennink

@NLGameVideosNL 在Safari浏览器和Google Chrome中，文本大小不会改变。 - user429620

@Wesley，你能否展示一下使用我在答案中发布的CSS时按钮的图片？ - Fabian Wennink

我在 Mac 上也看到了同样的 bug - 它不遵守字体。但出于某种原因，如果我在我的样式中同时更改字体颜色和背景颜色，那么它就开始遵守字体了。 - Chris Torrence

Answer 4

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

button {font-size: 1.5em;}

我使用了一个ID选择器：

。

\#submit {...}

- CalebZD

Answer 5

我做了这个，对我有效：

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

- Gabriel Santiago

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等。

- Martin

---

你尝试使用Shift-F5强制刷新页面了吗？或者，按照建议，给提交按钮添加一个类，并将该类用作句柄。 - Martin

不，马丁，小提琴在OSX上的Chrome绝对不起作用。 你用的是Windows吗？ - CpnCrunch

嗨@CpnCrunch，目前在我的Windows 7上，我的Firefox和Chrome上的小工具仍然可以正常使用。我无法评论Mac系统。 - Martin

是的，我记得这个问题只发生在Mac上。可以说这是OSX Chrome上的一个bug。 - CpnCrunch

我在 Mac 上也看到了同样的 bug - 它不遵守字体。但出于某种原因，如果我在我的样式中同时更改字体颜色和背景颜色，那么它就开始遵守字体了。 - Chris Torrence

Answer 7

这对我有效：

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

- nico_lrx

---

Wesley不需要更改字体系列。 - Martin

@AlpaNico 在Safari和Google Chrome中，文本大小不会改变。 - user429620