Home/ Questions/Q 8523993
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T07:33:57+00:00

I am trying to create a custom checkbox using CSS only and havent had

  • 0

I am trying to create a custom checkbox using CSS only and havent had much luck. Ive tried 2 different techniques:

  1. http://lea.verou.me/2011/05/rule-filtering-based-on-specific-selectors-support/
  2. Custom images as radio buttons (the suggestion by derik)

The first one works the best, and displays correctly in IE9, FF, and Chrome. However, the functionality in chrome seems to be a little off. In testing on Chrome, I am unable to click the image to cause a change in “checked”, instead I have to click the label’s text. Has anyone found a better, CSS only, way? Is there a way to correct the behavior in Chrome?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Mike a great solution for this is not to style the checkbox but style a label of the checkbox and hide the checkbox button.

    label { display: block; background: green; padding:10px; }
input[type="checkbox"] { display: none; }

<div>
<label for="example">Style me</label><input type="checkbox" id="example" />
</div>

    When you click the label it will check the checkbox, hide this and use css/javascript to do whatever you want with the label. This is easier than trying to style the checkbox because all browsers render inputs differently.

    • 0