Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

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>
like image 512
Amare Avatar asked Dec 11 '14 07:12

Amare


People also ask

How do I change the color of a checkmark in HTML?

To change the color of the checkmark, change the border color on the ::after style. Additionally, if you wanted it to always match your text color remove the border color on it altogether. To change the radio, change the radial gradient start color (the one that isn't white).

How do I change the color of a checkbox with a tick?

How to change color check in checkbox? Best option would be to inspect the element in chrome and then try your CSS there itself. Fastest way to achieve these type of CSS changes. Best option would be to inspect the element in chrome and then try your CSS there itself.

How do I change the color of a checkbox when using CSS?

Use the accent-color property to change the checkbox color in CSS.


2 Answers

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;
    }
like image 109
azhpo Avatar answered Oct 18 '22 02:10

azhpo


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

like image 1
Ankit Chaudhary Avatar answered Oct 18 '22 00:10

Ankit Chaudhary