如何更改 HTML 中复选框的选中标记颜色？ [复制]

Posted 2023-02-21

【中文标题】如何更改 HTML 中复选框的选中标记颜色？ [复制]

【英文标题】：How to change the checked mark color of a checkbox in HTML? [duplicate]

【发布时间】：2015-02-09 14:45:38

【问题描述】：

我想将以下复选框（其名称为“流派”）中的选中标记（勾号）颜色更改为“蓝色”。但它显示为“黑色”。

<input type="checkbox" name="genres" value="adventure" id="adventure_id">
<label for="adventure_id" style="font-family: 'SExtralight'; font-size:14px;">Adventure</label>

【问题讨论】：

到目前为止你有什么尝试？

为什么不使用图像精灵呢？

【参考方案1】：

我认为这就是你想要的（仅限 CSS）：

DEMO

您可以查看this的答案，来源来自我所掌握的。

CSS：

    input[type="checkbox"]:checked + label::after 
       content: '';
       position: absolute;
       width: 1.2ex;
       height: 0.4ex;
       background: rgba(0, 0, 0, 0);
       top: 0.9ex;
       left: 0.4ex;
       border: 3px solid blue;
       border-top: none;
       border-right: none;
       -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
       -o-transform: rotate(-45deg);
       -ms-transform: rotate(-45deg);
       transform: rotate(-45deg);
    

    input[type="checkbox"] 
       line-height: 2.1ex;
    

    input[type="radio"],
    input[type="checkbox"] 
        position: absolute;
        left: -999em;
    

    input[type="checkbox"] + label 
        position: relative;
        overflow: hidden;
        cursor: pointer;
    

    input[type="checkbox"] + label::before 
       content: "";
       display: inline-block;
       vertical-align: -25%;
       height: 2ex;
       width: 2ex;
       background-color: white;
       border: 1px solid rgb(166, 166, 166);
       border-radius: 4px;
       box-shadow: inset 0 2px 5px rgba(0,0,0,0.25);
       margin-right: 0.5em;
    

【讨论】：

您在代码中的哪个位置为刻度线指定了蓝色？

@Rahul 这里是border: 3px solid blue;

【参考方案2】：

我不认为你可以。但是你可以通过在复选框的背景中使用tick images来实现。 很好解释here