Custom flag

Question

Hi, I am trying to create a custom flag for my site, for example, a link to an image. What would be the best way to get around this? Many thanks.

Answer 1

There is a CSS trick that actually works by hiding the checkbox (or radio), defining a label (which turns the checkbox on / off), which will be a visual representation, and using :checked and + .

This is a simple example:

HTML

 <div class="foscheck"> <input type="checkbox" id="fos1" /> <label for="fos1"></label> </div> 

CSS

 .foscheck input { display: none; } .foscheck label { display: block; width: 20px; height: 20px; background: red; } .foscheck input:checked + label { background: blue; } 

jsFiddle Demo

Disadvantages: selector :checked unfortunately does not work in IE , only from IE9. You can apply Javascript reserve for IE only through conditional comments.

Note. . For accessibility, you should have text that describes the checkbox in the label , I just wanted to illustrate the effect.

Answer 2

jQuery is your best bet, it's a checkbox plugin, for example , but there are hundreds of them, so something else might suit you. Just google ' jquery custom checkbox '.