更改垫复选框中的“勾号”标记颜色

Question

我想更改垫子复选框内的刻度线颜色。我自定义了垫子复选框并将背景颜色设置为白色。但刻度线颜色不清晰可见。有什么办法可以改变刻度线颜色吗？如有任何帮助，我们将不胜感激。

Answer 1

您可以使用 css 文件并将其连接到代码，这是我的代码之一的示例，我想这就是您需要知道的全部内容：

input[type="checkbox"]{
    -webkit-appearance: initial;
    appearance: initial;
    width: 40px;
    height: 40px;
    border: none;
    position: relative;
    background: black;
}
input[class="player1"]:checked:after {
    /* Heres your symbol replacement - this is a tick in Unicode. */
    content: "X";
    color: orange;
    /* The following positions my tick in the center,
     * but you could just overlay the entire box
     * with a full after element with a background if you want to */
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    /*
     * If you want to fully change the check appearance, use the following:
     * content: " ";
     * width: 100%;
     * height: 100%;
     * background: blue;
     * top: 0;
     * left: 0;
     */
}
input[class="player2"]:checked:after {
    /* Heres your symbol replacement - this is a tick in Unicode. */
    content: "O";
    color: blueviolet;
    /* The following positions my tick in the center,
     * but you could just overlay the entire box
     * with a full after element with a background if you want to */
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    /*
     * If you want to fully change the check appearance, use the following:
     * content: " ";
     * width: 100%;
     * height: 100%;
     * background: blue;
     * top: 0;
     * left: 0;
     */
}