CSS for checkbox and radio not fancy

HTML & CSS
1

Hi,

I am developer not having much experience in CSS and design.

I am looking for simple css not fancy to work in multiple browser.

I check in google but they are fancy and others not working.

I have following example but not working.


.checkbox_class
{
	margin: 3px 3px 3px 4px;
	-webkit-appearance: checkbox;
	box-sizing: border-box;
	padding: initial;
	background-color: initial;
	border: initial;
}


<label for="Item"></label>
<input type="checkbox" value="1" id="Item" name="Item" />

-Thanks

2

Hi,

Unfortunately that code won’t do anything even if you had added the class to the checkbox correctly.:slight_smile:
e.g.


<input[B] class="checkbox_class"[/B] type="checkbox" value="1" id="Item" name="Item" />

All your code is doing is adding a margin to the checkbox. The other rules are basically the default so you just get a browser’s normal checkbox.

The only way to change the look of a checkbox consistently is to use advanced css3 and images as you have probably seen on google already. The method is to apply a background image to a label element and hide the checkbox. Clicking a label changes the checkbox (even when its hidden off screen) if they are associated so using the css3 :checked property you can change the labels background image also at the same time.

Here are a few of the best ones:

http://www.thecssninja.com/css/custom-inputs-using-css

http://lea.verou.me/2013/03/ios-6-switch-style-checkboxes-with-pure-css/

As you are new to CSS I suggest you leave them alone and let the browsers style them as it thinks best and as how your users will expect them to be. Form elements are notoriously hard to style and only a few basic properties can be changed so its best to keep them simple.

3

Hi Paul,

Thanks for information.

I check the example and try some.

They are using images for check and uncheck for checkbox and radio buttons.

I want to use css not images.

I am finish with css for all form elements (drop down,text field etc ) only checkbox and radio remaining.

Just if you could update my css with background color of checkbox and check/uncheck style arrow will work.

Please check attached image.

-Thanks

4

Hi,

Unfortunately it is impossible to style borders, backgrounds and colours on checkboxes consistently as there is such a wide variation of what can be styled. See here for how checkboxes look on different systems and you will see that they look vastly different depending on system so css will have little effect as they are just not the same anyway.

That’s the reason that all the demos use images because you can’t alter the checkbox appearance otherwise (some browsers may allow you to add a background or border but that in turn breaks other browsers and none allow you to change the check mark anyway).

You will either have to leave it at the default appearance or use one of the methods mentioned above.

There are some JS methods around to automate the process but again all will use images.

It’s just one of those things that we have to live with so you either have to accept it or use one of the methods above. The default checbox is usually pretty innocuous anyway and seldom spoils a page’s styling. The checkbox image you have attached is much like some browers will style it anyway.