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)?

This entry was posted on Wednesday, August 30th, 2006 at 4:06 am and is filed under CSS, Scripting, Tech. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

18 Responses to “Removing annoying CSS borders on Checkboxes and Radio buttons”

Tommy Olsson says:

August 31, 2006 at 3:13 am

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.
Kevin Lamping says:

October 6, 2006 at 6:58 am

@ 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.
francisco says:

October 31, 2006 at 5:25 am

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
francisco says:

October 31, 2006 at 5:26 am

use <select> (bad blog parser, i could spam you with script tags)
Lloydi says:

November 2, 2006 at 5:19 am

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.
Teal'c says:

November 29, 2006 at 9:37 am

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
msalter says:

November 29, 2006 at 2:26 pm

Perhaps Im missing something but cant you just add a class to all radio buttons / checkboxs and apply a ‘noborder’ style to the class ?
Lloydi says:

November 30, 2006 at 4:32 am

@msalter … Yes, you have missed something. I refer the right honorourable gentleman to my previous comment
James says:

January 23, 2007 at 7:01 am

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 :|
Pedro says:

January 25, 2007 at 11:33 am

Great. Copy-paste-and work.

Thanks for all the fish.
Kim says:

April 7, 2007 at 4:57 pm

Here is my solution; works great in both IE and FF:
style=”margin:0px;_margin:-3px”
Only IE understands the “_” character, FF ignores it.
Lloydi says:

April 10, 2007 at 3:48 am

@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
Tiago Faro says:

April 18, 2007 at 8:49 am

Very nice, solved my problem.

Thanks!

Tiago
rskumar says:

June 7, 2007 at 8:36 am

Hi Kim,

Great! Finally your code works.

Thanks a lot!!

rskumar
empoyy says:

July 17, 2007 at 9:12 pm

it works… thanks bro..

- empoyy
nick says:

September 4, 2007 at 2:19 pm

do you have to call this up through a body onload or can you just src it externally?
Brian says:

September 10, 2007 at 3:49 am

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
Shanx says:

March 11, 2008 at 6:25 am

In your CSS, just do:

a { outline: none }

Browsers that matter will respect it.

Blog Standard Stuff

Removing annoying CSS borders on Checkboxes and Radio buttons

18 Responses to “Removing annoying CSS borders on Checkboxes and Radio buttons”

Leave a Reply