Jump to content
dalawh

Edges + checkbox styling

Recommended Posts

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 by dalawh
  • Like 1

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

Thanks ShadowMage.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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. ^_^

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...