Blog Standard Stuff

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