Edges + checkbox styling

[dalawh]

Is there anyway to make the edges curved as opposed to being sharp? When I say edges, I mean the edge of a div, not a checkbox. Can you style a checkbox? Like change the color of the checkbox to something as opposed to its normal white background. I only want the checkbox to change color and not the whole input. The two questions above are not related.

Edited June 5, 2012 by dalawh

[niche]

Sorry you had to wait so long. A round check box is a circle (type="radio"). See: http://www.w3schools.com/tags/att_input_type.asp

[ShadowMage]

Most CSS properties (in my experience, anyway) have little or no effect on inputs, especially checkboxes and radio buttons. You can create custom checkboxes using images and JavaScript, but that's about it, unfortunately. @nicheWhile a round checkbox may look like a radio, it does not behave like one. Checkboxes allow for multiple options to be checked, but radios only allow for a single option to be checked.

[niche]

Thanks ShadowMage.

[Guest So Called]

You can check and uncheck a checkbox as often as you like. You can't unselect a radio button except by selecting another radio button.

[ShadowMage]

You can check and uncheck a checkbox as often as you like. You can't unselect a radio button except by selecting another radio button.

That too.

[dsonesuk]

For modern browsers you can use a custom background image for checkbox, use opacity: 0; to hide the check box above the background image, and use css selector mycheckbox:checked {} to change image to a custom checked chkbox when its selected.

[dalawh]

Most CSS properties (in my experience, anyway) have little or no effect on inputs, especially checkboxes and radio buttons. You can create custom checkboxes using images and JavaScript, but that's about it, unfortunately. @nicheWhile a round checkbox may look like a radio, it does not behave like one. Checkboxes allow for multiple options to be checked, but radios only allow for a single option to be checked.

Can you be a little more specific?

For modern browsers you can use a custom background image for checkbox, use opacity: 0; to hide the check box above the background image, and use css selector mycheckbox:checked {} to change image to a custom checked chkbox when its selected.

So I will need two images: a check and unchecked checkbox? So there is no way to make them custom without images?

[dsonesuk]

So I will need two images: a check and unchecked checkbox? So there is no way to make them custom without images?

Not really, You can get away with a single sprite image, that will have checked at top, unchecked at bottom or vice versa then change position of background image (move up or down) to show required image. I've seen this method used for text inputs, select/option dropdown.

[ShadowMage]

Can you be a little more specific?

About what? Creating custom checkboxes? Dsonesuk pretty much covered it, although I hadn't thought about the CSS approach. Either way, you still need two images (or one sprite image) and use CSS or JavaScript to change it. JavaScript would use the onclick event while CSS would use the :checked selector. JavaScript will be supported by older browsers, where the CSS would not. However, JS can be disabled.

[dsonesuk]

The only older browsers that don't support it are IE6 to 8, but IE9 supports opacity:0;, whereas these browsers don't, so you do it such a way that the normal checkbox will show in these older browsers OVERLAPPING, your custom image, But in IE9 it will be hidden and so will show your new customised checkbox.

[ShadowMage]

I thought the :checked selector was new in CSS 3 and according to this it is. The opacity can be "fixed" by using the filter property in the older IE versions, but AFAIK, there is no alternative to :checked.

[dalawh]

Oh okay. Thanks for the help.

[dsonesuk]

According to this http://kimblim.dk/css-tests/selectors/ older browsers support :checked support , unless you mean browsers before these, its only IE6 to 8 that won't work, i'm just saying if its not a big deal you can just use non customised normal checkbox for these browsers, Using opacity will work for IE9 so you will get the customised version, you just have to make sure the customised background image is either hidden behind the normal checkbox or removed completely using less than IE9 comment condition.