无法更改 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;
我还建议使用em
s 而不是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;
并使用 <input class="submit">
调用该类。虽然我的小提琴版本对我有用,但试试这个新的小提琴:jsfiddle.net/zxskp5nz/1
是的,我认为问题只发生在 mac IIRC 上。可以说这是 OSX chrome 上的一个错误。【参考方案7】:
这对我有用:
input[type=submit]
font-size: 1em;
【讨论】:
Wesley 不需要更改字体系列 @AlpaNico 文字大小在 safari 和谷歌浏览器中都没有改变。以上是关于无法更改 HTML 表单提交按钮的字体大小的主要内容,如果未能解决你的问题,请参考以下文章