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 ? – Syed Qarib Dec 11 '14 at 07:25 — Syed Qarib, 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 May 23 '17 at 12:26

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

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

3,938
1
10
23

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

2 Answers2

Linked