CSS INPUT styling

Question

Hello everyone,

Any style for INPUT affects every input element, is there a way to specify styling to apply for only CHECK BOXES without applying a class to the check box element?

thank you.

Answer 1

Not without using CSS 3. With CSS 3 you can do this:

input[type='checkbox'] { ... }

The last I checked, none of the IE browsers supported this though.

Answer 2

You can apply only to certain attribute by doing:

input[type="checkbox"] {...}

It explains it here.

Answer 3

input[type="checkbox"] {
 /* your style */
}

But this will only work for browsers except IE7 and below, for those you will have to use a class.

Answer 4

Although CSS does provide a way for you to do the style specific to the checkbox type or another type, there are going to be problems with browsers that do not support this.

I think your only option in this case is going to be to apply classes to your checkboxes.

just add the style="checkbox" to your checkboxes.

Then create that style in your css code.

One thing you could do is this:

main.css

input[type="checkbox"] { /* css code here */ }

ie.css

.checkbox{ /* css code here for ie */ }

Then use the IE specific css include:

<!--[if lt IE 7]>
   <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

You will still need to add the class for it to work in IE, and it will not work in other non-IE browsers that do not support IE. But it will make your website forward-thinking with css code and as IE gets support, you will be able to remove the ie specific css code and also the css classes from the checkboxes.

Answer 5

If you don't mind using javascript jQuery selectors could do this for you.

Answer 6

As IE6 doesn't understand attribute selectors, you can combine a script only seen by IE6 (with conditional comments) and jQuery or IE7.js by Dean Edwards.

IE7(.js) is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.

The choice of using classes or jQuery or IE7.js depends on your likes and dislikes and your other needs (maybe PNG-24 transparency throughout your site without having to rely on PNG-8 with complete transparency that fallbacks to 1-bit transparency on IE6 - only created by Fireworks and pngnq, etc)