Removing the dotted lines around checkboxes and radio buttons in a form

I get a dotted line on my check boxes and radio buttons when you click on them when the focus is on them

i was able to remove the dotted lines on links and submit buttons but not check boxes and radio buttons

any help

Thanks

Doing that is a bad idea. The outline is the only way someone using a keyboard without a mouse can tell which field currently has the focus.

If you REALLY want to do this you can do this (won’t work for IE6, the input[type=submit]…)


input[type=submit],a
{
  text-decoration:none;
}

A better way of getting all submit buttons would be to assign a class to it and reference that instead of input[type=submit].

Cheers.

input[type=submit],a
{
text-decoration:none;
}

did not work for the radio buttons or check boxes

thanks

I think you’re looking for the outline CSS property, but I would advise against turning this off. There are a lot of people (myself included) that tab through forms, and this will prevent the user from knowing which form control has focus.

input[type="radio"],
input[type="checkbox"] { outline: none; }

Hi :slight_smile:

I thought you wanted only submit buttons. I’m sorry. Use the code ShaneRiley used. (It won’t work in IE6 though).

Cheers.

Correct, it will not work in IE6. Personally, I’ve dropped support for the browser but if you need to support it you could use recognizable selectors like classes instead.

Just remember that by turning that off you are making your form unusable to anyone who navigates the page using the keyboard instead of the mouse.