Menu
I have a css class:
input {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
border: 1px solid #003399;
}
Which works for most of what I want but I now need to have a checkbox that doesn't have this border while the rest of the input elements on the page continue to have the border applied.
I therefore created the additional css class:
input[type="checkbox"]
{
border: none;
}
This works fine with FireFox and Chrome but not ie 8, an when I use the Developer Tools in ie to inspect the element I can see both styles have been picked up but it's only when I deselect the check box beside the input style does the border disappear for the check boxes.
This is the default:
And this is what I do to get rid of the border:
Why not just use the :not selector to invert the attribute selector?
input:not([type=checkbox])
{
border: 1px solid #039;
}
If it is IE8 or before, you should probably use separate rules for the classes where you do want to set the border, as it doesn't support :not (or any of the good stuff).
Edit:
input[type=checkbox]
{
border: none;
}
works in IE8 if you add a doctype, even the simple <!doctype html>
109
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
