css - 如何更改基础 4 自定义复选框中的 x 符号

Question

我正在寻找一种方法来覆盖自定义复选框基础中的选中 (x) 样式

按照自定义表单文档，我已成功实现了一个自定义复选框，如下所示：

<form class="custom">
    <label for="checkbox1">
        <input type="checkbox" id="checkbox1" CHECKED />
        <span class="custom checkbox checked"></span>Label for checkbox 1
    </label>
</form>

这允许我对复选框的外观进行 css 样式更改，但我找不到影响 x 本身的方法。

Answer 1

更改 CSS 中内容的值

form.custom .custom.checkbox.checked:before {
content: "×00d7";}

至

 form.custom .custom.checkbox.checked:before {
    content: "*";}

或者你想要什么

Answer 2

如果您查看链接到的页面上使用的CSS 文件，您会发现这部分，即为选中的复选框设置样式：

form.custom .custom.checkbox.checked:before {
    content: "\00d7";
    color: #222222;
    position: absolute;
    top: -50%;
    left: 50%;
    margin-top: 4px;
    margin-left: -5px;
}

更改内容将更改显示的符号。希望这可以帮助。

DEMO（在 Andrey 的评论中提供）

Answer 3

试试这个代码，它将“x”更改为真符号

form.custom .custom.checkbox.checked:before {
content: "\2714";}