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)?
on August 31st, 2006 at 3:13 am [link]
Unless you’re ’supporting’ prehistoric browsers you could just use attachEvent(), since IE is the only ‘modern’ browser that doesn’t support attribute selectors. Then you could use the proper input[type=”text”] (no space between ‘input’ and ‘[’!) for 21st century browsers.
on October 6th, 2006 at 6:58 am [link]
@ Tommy,
I believe Opera now supports attachEvent so you’d need a different method (maybe CC’s??), but I agree you should only feed the javascript to IE and then give the good CSS to the newest browsers.
on October 31st, 2006 at 5:25 am [link]
Or you could simply put style=”border:none” on each radio input, to force IE to drop the border.
I think this is cleaner than using javascript.
Alternatively, if you can, use
on October 31st, 2006 at 5:26 am [link]
use <select> (bad blog parser, i could spam you with script tags)
on November 2nd, 2006 at 5:19 am [link]
francisco, I think you are missing the point - if you have a site with lots of these littered around, by using style=”border:none” on each one, you are not centralising the design/look in the way that you should be with CSS. The script gets around a particular browser’s problem in a central location thus avoiding your approach.
on November 29th, 2006 at 9:37 am [link]
All I can say is nice one Lloydi, the above worked like a charm.
Been looking everywhere for this solution, I had over 40 check boxes all with an annoying borders, tried for days and all solutions to rid the border. you had the answer.
thx,
Teal’c
on November 29th, 2006 at 2:26 pm [link]
Perhaps Im missing something but cant you just add a class to all radio buttons / checkboxs and apply a ‘noborder’ style to the class ?
on November 30th, 2006 at 4:32 am [link]
@msalter … Yes, you have missed something. I refer the right honorourable gentleman to my previous comment
on January 23rd, 2007 at 7:01 am [link]
I’m not like a mega noob or anything, but i tried your code and the border insists on staying….
perhaps i’ve put it in the wrong place, perhaps IE hates me
But my checkbox has the border around the white box and then a black border around that :|
on January 25th, 2007 at 11:33 am [link]
Great. Copy-paste-and work.
Thanks for all the fish.
on April 7th, 2007 at 4:57 pm [link]
Here is my solution; works great in both IE and FF:
style=”margin:0px;_margin:-3px”
Only IE understands the “_” character, FF ignores it.
on April 10th, 2007 at 3:48 am [link]
@Kim - again, it may work, but you don’t really want to have to mark up each and every input element with a checkbox.
@Pedro - you got fish out of this? Are we on the same page, so to speak? :-D
on April 18th, 2007 at 8:49 am [link]
Very nice, solved my problem.
Thanks!
Tiago
on June 7th, 2007 at 8:36 am [link]
Hi Kim,
Great! Finally your code works.
Thanks a lot!!
rskumar
on July 17th, 2007 at 9:12 pm [link]
it works… thanks bro..
- empoyy
on September 4th, 2007 at 2:19 pm [link]
do you have to call this up through a body onload or can you just src it externally?
on September 10th, 2007 at 3:49 am [link]
I know that this was originally posted about a year ago, butI have been looking for a workaround to this problem for weeks. Thanks for the tip.
Brian
on March 11th, 2008 at 6:25 am [link]
In your CSS, just do:
a { outline: none }
Browsers that matter will respect it.