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> I think this is what you want (CSS only):
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; } 
border: 3px solid blue;
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
