Cannot add color to html checkbox tick

Question

Using bootstrap 4, I'd like the ticks to appear green on checkboxes:

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

Here is the 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/

Appreciate your help to fix this.

you can't add a background for a checkbox, probably you can make your custom checkbox. — ThS, Sep 21 '18 at 11:59
I don't want to change the square's background. That was just a (failed) attempt to make the tick green. — Babr, Sep 21 '18 at 12:00
I know, you can make your own custom checkbox with a custom tick in it by a little bit of `HTML` markup and some `CSS`. — ThS, Sep 21 '18 at 12:02
https://www.w3schools.com/howto/howto_css_custom_checkbox.asp — Gerard, Sep 21 '18 at 12:08

Siamak · Accepted Answer · 2018-09-21T12:48:24.927

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

That isn't what he wants though, he wants the ticks to appear green, not the background. — rpm192, Sep 21 '18 at 12:18
I updated the code. Please remove your negative vote. See https://jsfiddle.net/qbo7tce4/51/ — Siamak, Sep 21 '18 at 12:37
@rpm192 I guess it now is what he wants, so please remove your negative vote, if possible. — Siamak, Sep 21 '18 at 12:51

score 0 · Answer 2 · answered Sep 21 '18 at 12:24

Fiddle: http://jsfiddle.net/5g3w32ug/

HTML:

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

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

I got this from: here

score 0 · Answer 3 · answered Sep 21 '18 at 12:47

You can't style the default browser's checkbox, but, you can create your own custom one. By hiding the default checkbox and with simple HTML and CSS you can do the trick.

#my-checkbox {
  display: none;
}
.custom-checkbox {
  position: relative;
}
.custom-checkbox .checkbox {
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  height: 25px;
  width: 25px;
  border: 1px solid #1738d7;
}
.custom-checkbox:before, .custom-checkbox:after {
  display: inline-block;
  vertical-align: middle;
  transition: all .5s;
}

.custom-checkbox:before {
  content: "";
  height: 20px;
  width: 20px;
  margin-right: 5px;
  border-radius: 2px;
  border: 1px solid #2528d7;
}
.custom-checkbox:after {
  /* the '\2713' represents the tick character */
  content: "\2713";
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
  color: green;
  font-size: 1rem;
  opacity: 0;
}
#my-checkbox:checked + .custom-checkbox:after {
  opacity: 1;
}
#my-checkbox:checked + .custom-checkbox:before {
  background-color: #ccc;
}

<input type="checkbox" id="my-checkbox" class="my-checkbox" />
<label for="my-checkbox" class="custom-checkbox">check me !</label>

Cannot add color to html checkbox tick

3 Answers3