如何修改type为submit的input按钮的字体粗细？

云上老周

2026-6-13

解决input[type=submit]按钮字体粗细无法修改的问题

首先你犯了一个基础错误：font-weight 属性不支持百分比取值，它的有效值是100-900之间的整数（比如400对应正常粗细，700对应加粗），或者关键字（normal、bold、lighter、bolder）。你写的50%是无效的，浏览器会直接忽略这个设置。

其次，浏览器对input[type=submit]这类表单按钮有默认样式，很多浏览器会默认给按钮设置font-weight: bold，且部分浏览器的默认样式优先级不低，普通选择器可能被覆盖。另外，::before伪元素对<input>这类替换元素完全不起作用——因为它们没有内容模型，伪元素无法渲染。

给你几个可行的解决方法：

方法一：正确取值+精准选择器

使用font-weight的有效值，确保选择器足够明确，必要时可强化优先级：

<input type="submit" value="click this button">

input[type="submit"] {
  font-weight: 400; /* 对应normal，正常粗细 */
  /* 若仍被默认样式覆盖，添加浏览器样式重置 */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

方法二：完全重置默认样式

如果上述方法无效，可以先清空按钮所有默认样式，再自定义：

input[type="submit"] {
  all: unset; /* 重置所有浏览器默认样式 */
  font-weight: 400;
  /* 重新添加必要的按钮样式 */
  background: #007bff;
  color: #fff;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 4px;
}