CODEWITHSUNDEEP
htmlcss
Mike_G
Mike_G

Reputation: 16512

custom checkbox input using CSS only

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?

Upvotes: 3

Views: 10337

Answers (3)

Radu Giurgiu
Radu Giurgiu

Reputation: 1

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.

Upvotes: 0

Jacksnap13
Jacksnap13

Reputation: 127

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

Upvotes: 3

chadpeppers
chadpeppers

Reputation: 2057

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.

Upvotes: 8

Related Questions