3

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?

Community
  • 1
  • 1
Mike_G
  • 16,237
  • 14
  • 70
  • 101
  • Possible duplicate of [Custom checkbox using only CSS and HTML](https://stackoverflow.com/questions/34712350/custom-checkbox-using-only-css-and-html) – Narottam Goyal Apr 26 '18 at 04:49

3 Answers3

8

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.

chadpeppers
  • 2,057
  • 1
  • 20
  • 27
  • This was one of those answers that was so obvious it flew right by me. Thank you. – Mike_G Sep 14 '12 at 14:20
  • 3
    This is an old post but anyone else that comes I ran into an error with my code above using "display: none;" the reason is in IE8 if it is display none the label will not check the radio button or checkbox. A work around is to position: absolute the checkbox, and then use a top: -9999px. So just send it off the screen somewhere! – chadpeppers Jan 12 '13 at 14:15
3

You can use the pseudo element :before. That way you still get the functionality of the checkbox. In my example I simply change the colors, but you could add a white background and your own custom image with background: url(yourimage.png).

See my bin here

http://jsbin.com/ABoW/1/edit

Jacksnap13
  • 127
  • 9
0

I recommend this version: http://equaltozero.ro/jquery-custom-form-v2-custom-input-type-checkbox-radio-and-custom-select-plugin/ (This is a small plugin that I created)

Maybe you can find this useful for you. :-)

From "@Lelio Faieta" suggestion, I will write more details about the link.

Well this plugin(jQuery small plugin) is allowing you to play with input type(checkbox and radio) design, with disabled action and custom SELECT. This is a version that will let you play better with the checkboxes.

Radu Giurgiu
  • 1
  • 3