html - 如何删除自定义复选框中的勾号？

Question

如何取消复选框中的勾号并将其替换为字母？

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

w3schools.com或者 JSFiddle

Answer 1

在当前代码中，这会创建复选标记:

.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

请注意，它是通过使用旋转正方形的边框创建的(因此标记实际上是正方形的 Angular )。您可以通过删除边框属性并添加一个 content: "Y" 来实现任何您想要的效果(例如用 Y 代替复选标记)。但是您还必须尝试其他样式以使其看起来不错。