CSS Apply border to all input elements except checkbox
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 Devel开发者_如何学JAVAoper 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>
It seems to say medium none. You could try border: 0px transparent; to see if that make's a difference.
In IE it is not the border that you are seeing. It must be the highlighting due to the focus on the checkbox. Try to execute blur event on checkbox click it might help.
does this help?
input[type="checkbox"]
{
border: none !important;
}
加载中,请稍侯......
精彩评论