Grow your CSS skills. Land your dream job.

Remove Dotted Border on Buttons?

  • # February 5, 2009 at 8:23 pm

    I have always used

    Code:
    a { outline-style: none }

    to get rid of the dotted border on everything else but it doesn’t solve the problem for form button elements. They still have the dotted border and it looks horrible. I have tried removing borders and outlines but nothing seems to work. Is there a way to fix this?

    Thanks!

    # February 5, 2009 at 10:43 pm

    Perhaps you are referring to the light gray dotted border that appears when a button is clicked? That is the "focus" state, you can target it in CSS like this:

    button:focus {}

    But in general I would suggest leaving it alone — it allows people with disabilities or who navigate websites using a keyboard to see what element they have tabbed to on the page, and it’s important that they get some sort of visual feedback.

    # February 6, 2009 at 12:03 am

    @falkencreative – I hear what you are saying and I have tried every sort of button:focus or #contact input.button:focus then added "outline-style: none" and "border-style: none", but nothing works. I don’t see any way to get rid of this dotted line. And when it comes to "accessibility" I hear that all the time but to be honest I don’t really care. I’m sure that sounds harsh but I would rather it be nicer looking for 99.99% of the people that come to my site then "more accessible" for the 0.01% of disabled people that come to my site. Sorry if that is mean but I’m just trying to be practical. Thanks!

    # February 6, 2009 at 1:42 am

    instead of outline-style, just do "outline":

    outline: none;

    # February 6, 2009 at 3:23 pm

    @TheDoc – Thanks but that doesn’t work either. It is actually more proper to use "outline-style" but it doesn’t matter in this case since neither of them removes the dotted outline.

    Any other ideas?

    Thanks!

    # February 6, 2009 at 7:50 pm

    @dangdang: could you tell us what html element you are trying to style and in what browser you are not achieving the desired effect? live sites always help. thanks, ulrike

    p.s. on the note of "outline" helping accessibilty:
    that doesn’t only cover disabled peoples ats, but also laptops and mobile phones as well as geeks not using a mouse. Not using a mouse does not mean you can’t.
    Even if I personally think you should cover for that. your argument seems quite ignorant. do you know that there are countries were you are legally obliged to fulfill certain webstandards? i am only trying to understand your reasoning to suppress visual clues to tell people where their focus on your site is.

    # February 7, 2009 at 12:16 pm

    @ulrike – Here is a perfect example for you http://stopdesign.com/eg/buttons/3.0/code.html. Try clicking the buttons made from "a" or anchor links and the dotted outline has been removed using CSS. If you look at his source code he has also tried to remove the dotted outline from the "button" elements but as his comment states "doesn’t seem to be respected for <button>". Now click one of the buttons that is made from a "button" element and you see the ugly outline coming out of the sides which makes the button look bad. This is what I am referring to. I personally use Firefox for most of my browsing.

    Now for the idea that it is ignorant to choose looks over accessibility that is something we designers have to do on a regular basis. I don’t hear people complaining about people making sites in flash. Flash buttons can’t be selected with the tab key either. I will make these choices for my sites and you can make them for yours but don’t call me ignorant for choosing to remove an ugly dotted outline from my buttons.

    So is there a way to remove these outlines from "button" elements or "input type=submit" buttons?

    Thank you for your help!

    # May 8, 2009 at 6:31 am

    I have the EXACT same problem, and its quite frustrating ! I don’t understand why outline: none; doesn’t work on buttons as well, would be so nice and easy if it did hehe.

    # May 8, 2009 at 1:43 pm

    I didn’t read through the entire thread, but have you tried "border:none;" ?

    # May 8, 2009 at 6:35 pm

    You can use the ::-moz-focus-inner pseudo class for FF, but without hacky JS not sure you can do it for other browsers.

    More info here: Remove Button Focus Outline Using CSS

    # November 7, 2009 at 10:19 am

    I find this works for me

    * a:active, a:focus {outline: none}

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".