Removing annoying CSS borders on Checkboxes and Radio buttons
So, this is one of those caring, sharing geeky posts. When you apply borders to text inputs in CSS (to remove those bevelled edges you get by default) using input {border:1px solid gray;} … or whatever, it always messes up radio buttons and checkboxes.
One solution is to use attribute selectors, like so: input [type="text"] {border:1px solid gray;} but IE doesn’t understand that concept, so you’re nback to square one. Well, unless you use the power of the DOM (cue dramatic drum roll). So here’s a little script that takes care of things for you:
function addEvent(elm, evType, fn, useCapture)
{
if(elm.addEventListener)
{
elm.addEventListener(evType, fn, useCapture);
return true;
}
else if (elm.attachEvent)
{
var r = elm.attachEvent('on' + evType, fn);
return r;
}
else
{
elm['on' + evType] = fn;
}
}
// removes the square border that IE
// insists on adding to checkboxes and radio
function removeCheckBoxBorders()
{
var el = document.getElementsByTagName("input");
for (i=0;i<el.length;i++)
{
var type = el[i].getAttribute("type");
if((type=="checkbox")||(type=="radio"))
{
el[i].style.border = "none";
}
}
}
addEvent(window, 'load', removeCheckBoxBorders, false);
If you like this idea, why not Digg it (or whatever else it is you cool kids do these days)?
dConstruct06 - Social events [updated]
Just a quick post to find out what plans people have for socalising at dConstruct. I’m arriving sometime on the Thursday evening but am not staying on after the event on Friday so I’d be interested to find out if there’s anything arranged for that Thursday or if any groups have arranged to meet somewhere nearby. Please do let me know what you’re planning to do by adding a note or two in the comments here. Thanks :-)
Dear John (Dvorak)
I only know two things about Dvorak:
- He was a composer of some note (although I’d much rather listen to The Prodigiy)
- There’s a keyboard layout/design called Dvorak named after its inventor
Recently, another Dvorak appeared on my radar. He wasn’t anyone I’ve heard of before - not my kind of reading - but he spat the dummy over CSS in such a way that us ‘experts’ went on a bit of a rampage. Well, as much as you can with words on a screen. Hardly pitchforks and torches stuff. Anyway, I digress. The only thing I could suggest was that this Mr Dvorak was doing a bit of composing using a weird Dvorak keyboard when he’s used to QWERTY layout. Well, he wasn’t making total sense, it seemed.
So, Molly offered 2 days of training gratis, and now it’s my turn to offer something for Mr Dvorak (well, me Jeff, Dan and Colly collectively). We’re giving him a copy of Beginning CSS Web Development followed by Pro CSS Techniques (once we’ve finished writing it - I’m halfway through my allotted 4 chapters!). Let’s hope it does the job, eh?
Now, I’ve got a problem with the Aston Martin DB9. It’s a rubbish car, isn’t it? Yeah? Are you listening, Aston Martin? I know a way that you could convince me I am wrong …
