如何设置input输入框文字为font-weight:bold且不改变placeholder字重

云原生阿岚

2026-10-19

解决方案

你可以通过单独为 input 的 ::placeholder 伪元素设置字重，覆盖从父元素继承的粗体样式，实现仅输入文本加粗的效果：

第一步：给 input 元素本身设置 font-weight: bold，作用于用户输入的文本
第二步：用各浏览器兼容的 placeholder 伪元素选择器，单独将占位符的字重设为 normal

代码示例

<input type="text" placeholder="请输入内容">

/* 输入文本加粗 */
input {
  font-weight: bold;
}

/* 占位符保持常规字重 */
/* Chrome、Safari、新版Edge */
input::-webkit-input-placeholder {
  font-weight: normal;
}
/* 火狐浏览器 */
input::-moz-placeholder {
  font-weight: normal;
}
/* IE10、IE11 */
input:-ms-input-placeholder {
  font-weight: normal;
}
/* W3C 标准语法 */
input::placeholder {
  font-weight: normal;
}