html - 无法为 html 复选框勾选添加颜色

Question

使用 bootstrap 4，我希望勾号在复选框上显示为绿色:

<div class="mycontainer">
    <div class="check-item">
      <input type="checkbox" value="Apple"   class="checkmark">
      Apple
    </div>

    <div class="check-item">
      <input type="checkbox"    value="Orange"   class="checkmark">
      Orange
    </div>
</div>

这是 CSS:

.mycontainer {
  display: flex;
  flex-wrap: wrap;

}
.checkmark {
  height: 25px;
  width: 25px;
  background-color: green;  
}
.check-item {
  margin-right: 20px;
}

https://jsfiddle.net/Babrz/qbo7tce4/3/

感谢您帮助解决此问题。

Answer 1

CSS:

.check-item{
display:inline;
position:relative;
padding-left:35px;
margin-bottom:12px;
cursor:pointer;
font-size:22px;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none
}

.check-item input{
position:absolute;
opacity:0;
cursor:pointer
}

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

.check-item:hover input ~ .checkmark{
background-color:#ccc
}

.check-item input:checked ~ .checkmark{
background-color:#eee
}

.checkmark:after{content:"";
position:absolute;
display:none
}

.check-item input:checked ~ .checkmark:after{
display:block
}

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

HTML:

<div class="mycontainer">
<label class="check-item">Apple
<input type="checkbox" value="Apple" class="checkmark">
<span class="checkmark"></span>
</label>
<label class="check-item">Orange
<input type="checkbox" value="Orange" class="checkmark">
<span class="checkmark"></span>
</label>
</div>

From here