CODEWITHSUNDEEP
javascripthtmlcssformscheckbox
HAWKES08
HAWKES08

Reputation: 521

How can I create a custom checkbox?

Hello i am trying to create a custom checkbox for my website like the image link provided. What would be the best way to go around doing this? Many thanks.

Custom checkboxes

Upvotes: 8

Views: 8604

Answers (2)

kapa
kapa

Reputation: 78731

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

This is just a simple example:

.foscheck input { display: none; }
.foscheck label { display: block; width: 20px; height: 20px; background: red; }
.foscheck input:checked + label { background: blue; }
<div class="foscheck">
  <input type="checkbox" id="fos1" />
  <label for="fos1"></label>
</div>

jsFiddle Demo

Note: For accessibility, you should have some text describing the checkbox in the label. I just wanted to illustrate the effect.

Upvotes: 15

Jordan Wallwork
Jordan Wallwork

Reputation: 3114

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

Upvotes: 1

Related Questions