How to change the checked mark color of a checkbox in HTML?

Question

I want to change the checked-mark (tick) color in the following checkbox (its name is "genres") as "blue". But it is displayed as "black".

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

And what have you tried so far ? – Qarib Haider Dec 11 '14 at 07:25 — Qarib Haider, Dec 11 '14 at 07:25
Why not use image sprites for that? – Justinas Dec 11 '14 at 07:36 — Justinas, Dec 11 '14 at 07:36

score 24 · Accepted Answer · edited Mar 27 '23 at 20:58

I think this is what you want (CSS only):

DEMO

You can check this answer, the source from what I've got.

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

where in the code have you specified blue color for the tick mark? — Rahul, Apr 18 '18 at 05:19
@HanzlaHabib I am having first label and checkbox later, when i tried with this code, checkbox itself is not visible. Please let me know how to make it work in my scenario — AMDI, Jul 05 '22 at 21:57

score 1 · Answer 2 · answered Dec 11 '14 at 07:36

1

I don't think you can.But you can achieve it by using tick images in the background of checkbox. It is well explained here

answered Dec 11 '14 at 07:36

Ankit Chaudhary

4,059
1
11
23

How to change the checked mark color of a checkbox in HTML?

2 Answers2

Linked