如何在HTML中更改复选框的勾选标记颜色？

Question

我想将以下复选框（名称为"genres"）中的勾选标记颜色更改为"蓝色"，但它显示为"黑色"。

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

- Amare

---

你目前尝试了什么？ - Qarib Haider

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

Answer 1

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

演示

你可以查看这个答案，源自我所得到的。

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;
}

- azhpo

---

在代码中，你在哪里指定了刻度标记的蓝色？ - Rahul

@Rahul，这是代码 border: 3px solid blue;。 - Hanzla Habib

@HanzlaHabib，我先有一个标签，后面是复选框，但是当我尝试使用这段代码时，复选框本身并不可见。请告诉我如何在我的情况下使其工作。 - AMDI

Answer 2

我不认为你可以做到。但是你可以通过在复选框的背景中使用勾选图像来实现它。这里有一个很好的解释这里。

- Ankit Chaudhary