我有这个规则:
body {
font-family: Arial,Helvetica,sans-serif;
font-size: 12px
}
但是我希望选择框和按钮的字体大小与普通文本不同。
如果我想让所有内容都具有相同的字体大小,该怎么办?
谢谢
Javi
通常表单元素不会继承这些属性,所以你需要这样做:
body{
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
}
input, select, button{
font-family: inherit;
font-size: inherit;
}
body,
input,
select,
button {
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
}
默认情况下,表单元素(例如文本类型的输入框和密码框、选择框、文本域和按钮)会使用等宽字体进行样式设置,其结果大小约为13.33像素。
您可以检查C:\Program Files\Firefox\res\forms.css
(在WinXP下)或使用Firebug在HTML部分中查看,在“样式”选项卡右侧的小三角形==>默认CSS属性。
body {
font: normal 62.5%/1.5 Verdana,Arial,Helvetica,sans-serif;
}
input, select, textarea, button {
font-size: 1.2em;
}
p {
font-size: 1.2em;
}
将会导致表单元素使用12px
+Verdana
字体(对于整个页面,1em = 10px
等价)
font: -moz-field;
是什么意思,但这就是应用的样式 :) 您可以通过激活选项,在现代 DevTools 中查看这些默认样式。 - FelipeAlsbody {
font-family: sans-serif;
}
button {
font:inherit
}
<html>
<head>
</head>
<body>
<p>An example of a sans-serif font</p>
<button>Cick Me</button>
</body>
</html>
关于按钮不确定,但大多数浏览器尝试以标准方式(例如12点Arial)样式化<select>
元素。如果您想更改这些的样式,则必须添加显式的CSS规则:
select {
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
}