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

Posted

技术标签:

【中文标题】无法更改 HTML 表单提交按钮的字体大小【英文标题】:Font size of HTML form submit button cannot be changed 【发布时间】:2015-03-23 12:17:26 【问题描述】:

如何增加提交按钮的字体大小?特别是在 chrome 中,它太小了,而且文本看起来很扁。 Working fiddle

body, input 
    font-size: 30px; 

我知道有

-webkit-appearance: none;

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

【问题讨论】:

发布的代码使字体大小为 30px。这是荒谬的,但它按定义工作。您需要说明问题是什么,您如何尝试解决它,以及您的方法是如何失败的。 【参考方案1】:

Webkit 将尊重您的自定义表单元素样式如果您设置了边框或框阴影属性(是的,很奇怪)。正如其他人所说,至少从-webkit-appearance: none;开始(我会添加-moz-appearance: none; appearance: none;),然后参考this answer to "html select font-size"

【讨论】:

在 chrome 上将字体大小内联或链接 css 什么也没做。添加了 webkit 外观和宾果游戏,提交按钮更改了大小。【参考方案2】:

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

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

【讨论】:

【参考方案3】:

要更改提交按钮的字体大小,只需使用以下 css 代码:

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

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

编辑:将 px 更改为 em

【讨论】:

:p 是的,我刚注意到哈哈 但请不要像素使用 em ;) @ChrisEmpx 我知道,刚刚改了 :) @NLGameVideosNL 文本大小在 Mac 上的 Safari 和谷歌浏览器中都不会改变。 @Wesley 使用我在答案中发布的 css 时,您能给我们看一张按钮的图片吗?【参考方案4】:

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

button font-size: 1.5em;

我使用了 ID 选择器:

\#submit ...

【讨论】:

【参考方案5】:

我这样做并为我工作:

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

【讨论】:

【参考方案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,等等。

【讨论】:

你用 shift-F5 强制刷新了页面?或者,按照建议向提交按钮添加一个类,并将该类用作句柄。 你没有复制我答案中的代码,阅读你写的内容并将其与我在答案中写的内容进行比较。 好吧,你说过尝试添加一个类,这就是我所做的——当我点击你的 jsfiddle 时,它​​与我的 btw 相同,正常的默认大小......在 chrome 和 safari 中。不确定您正在检查哪个浏览器? 你的类实现是错误的。阅读如何在 Css 中设置和使用类,但你有一个类 .submit font-size:0.5em; 并使用 &lt;input class="submit"&gt; 调用该类。虽然我的小提琴版本对我有用,但试试这个新的小提琴:jsfiddle.net/zxskp5nz/1 是的,我认为问题只发生在 mac IIRC 上。可以说这是 OSX chrome 上的一个错误。【参考方案7】:

这对我有用:

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

【讨论】:

Wesley 不需要更改字体系列 @AlpaNico 文字大小在 safari 和谷歌浏览器中都没有改变。

以上是关于无法更改 HTML 表单提交按钮的字体大小的主要内容,如果未能解决你的问题,请参考以下文章

在 Extjs 4 中更改按钮字体大小

如何更改数据表中的导出 PDF 字体大小?

Access-VBA 更改表单中文本的字体和大小

更改单选按钮旁边的字体大小

更改字体大小而不弄乱 Tkinter 按钮大小

在不丢失 Html 样式的情况下更改 NSAttributedString 中的字体大小 - Swift