能否不使用::before和::after伪元素，用Unicode字符美化复选框？

首先明确：CSS无法直接修改<input>标签本身的内容——因为<input>属于替换元素，它本身没有可编辑的文本内容，CSS的content属性也无法作用在这类元素上。

既然你已经用掉了::before和::after伪元素，我们可以通过将Unicode字符嵌入背景图的方式来替换原生复选框样式，完全不需要依赖伪元素。

调整后的代码 #

CSS 代码

input[type="checkbox"] {
  appearance: none;
  /* 设置复选框的基础尺寸 */
  width: 1.2em;
  height: 1.2em;
  /* 未选中时的边框轮廓 */
  border: 1px solid #666;
  cursor: pointer;
  /* 未选中状态显示空心复选框Unicode */
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><text x="12" y="18" font-size="20" text-anchor="middle" fill="#666">☐</text></svg>') center/100% no-repeat;
}

input[type="checkbox"]:checked {
  /* 选中状态显示实心复选框Unicode */
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><text x="12" y="18" font-size="20" text-anchor="middle" fill="#2196F3">☑</text></svg>') center/100% no-repeat;
  /* 可选：选中时同步修改边框颜色 */
  border-color: #2196F3;
}

HTML 代码

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
    <body>
      <input type="checkbox" />
    </body>
 </html>

额外说明 #

• 你可以根据需求调整尺寸、颜色，甚至替换Unicode字符（比如用✅代替☑）
• 这种方式兼容性很好，主流浏览器都支持SVG背景图的写法

内容的提问来源于stack exchange，提问作者rhavin