Dotted border outline on active links

[Lost User 232697]

In Firefox a dotted border outline appears on links and buttons when they are clicked. Although this is fine in some cases, in other cases it looks ugly and makes a web design look sloppy. This should not be standard. It should be up to the web designer to add a CSS rule for this if desired. I'm usually able to get rid of this for links and images. However, certain input buttons still have the border appearing when clicked and it looks awful. For an example, please visit the following link and then click and hold the Add to Cart button:

http://www.fullersfineherbs.com/index.p ... t&Itemid=1

I'd like to submit a feature request for the next release of Firefox that this behavior be turned off in the default style-sheet rendering. If there is somewhere else I can post this or if you can see a way to turn off the border for this particular element as a temporary fix, please let me know. I have the following rules in the external style sheet:

a { outline-style: none; }

input { outline-style: none; }

[old np]

Set browser.display.focus_ring_width in about:config to 0.

[jqp]

You would have to use either

Code: Select all

a:active { outline: none; }

or simply

Code: Select all

:active { outline: none; }

for CSS to work. Your CSS rules aren't specific enough to override the browser defaults. Or, if I'm misunderstanding, you may be talking about :focus instead:

Code: Select all

:focus { outline: none; }

Both of those are particularly bad for accessibility, so use at your own risk.

[jscher2000]

I like the dotted box to show focus, but maybe that's just me.

The problem in this case is the default 6px left and right padding causes the box's left border to cut through your background image. To avoid this, you could add padding:0 to your rules, which will widen the dotted box on both sides.

(I tried a couple approaches to fitting the dotted box closely to the 141px wide image, but all of them changed the text centering in an undesirable manner.)

Added: I discovered the 6px padding by using the DOM Inspector's CSS Rules list, which shows Firefox's built-in rules for the selected element. But it occurs to me that this value might be theme-dependent; I use the default theme.

[Lost User 232697]

Thanks for the quick replies. Yeah, I like the focus border in some cases but in other cases I don't and it is hard to get rid of. Seems like it would make more sense if it could be added selectively by the designer rather than having to code rules to disable it.

I'm wanting to change this for anybody who visits the site, not just on my own browser so, setting browser.display.focus_ring_width in about:config to 0 won't work.

I've tried all of the suggested CSS rules mentioned here in my external style sheet and none of them work for this particular button, perhaps the inline styling is overriding it. Here is the code snippet for the button only:

Code: Select all

<input type="submit" style="text-align:center;background-position:bottom left;width:180px;height:35px;cursor:pointer;border:none;font-weight:bold;font-family:inherit;background: url('http://www.fullersfineherbs.com/components/com_virtuemart/shop_image/ps_image/add-to-cart_brown.gif') no-repeat left center transparent;vertical-align: middle;" value="Add to Cart" title="Add to Cart" />

Thanks again for the help.

[jscher2000]

Yeah, I like the focus border in some cases but in other cases I don't and it is hard to get rid of. Seems like it would make more sense if it could be added selectively by the designer rather than having to code rules to disable it.

If I'm tabbing among controls and there's no focus indicator, I don't know where the focus is. As the user, I should be entitled to have my border. If you want to prevent focus on the control, you could add this to your <input> (the alert is just for debugging):

Code: Select all

onfocus="alert('Unfocusable');blur();"

A user still can submit either by clicking with the mouse or by pressing Enter in a text input. Or, what would be better would be to move focus to the next or previous <input>. Ultimately, though, I prefer the normal behavior.

[Lost User 232697]

onfocus... that does the trick. Thanks a bunch! Only problem is that every instance of a button like that needs to have the code added to it. The button already indicates that it is being pressed, so again it seems to me that it would be better to have the dotted border turned off by default in Firefox.

[jscher2000]

The button already indicates that it is being pressed, so again it seems to me that it would be better to have the dotted border turned off by default in Firefox.

I like to use Tab and then Spacebar to submit forms. That's why I like it the way it is. But I'm sure there is a place around here to submit a feature suggestion if you like.

[Robin_reala]

No no no no no, please don't propagate that awful onfocus blur JS. As jqp said earlier, use the outline property to affect it.

[jscher2000]

To Robin and jqp: How does outline work with submit inputs? I can't figure it out:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<base href="http://www.fullersfineherbs.com/components/com_virtuemart/">
<title>Outline on Submit Buttons</title>
<style type="text/css">
input:focus {outline:none;}
input[type="submit"]:focus {outline:none;}
#submit1:focus {outline:none;}
#submit2:focus {outline:none;}
</style>
</head>
<body>
<p>Use Tab and Shift+Tab to move focus in the form.</p>
<form action="http://www.fullersfineherbs.com/index.php" method="post"
   name="addtocart" id="addtocart0">
   <p><label for="quantity_0">Quantity:</label>
   <input id="quantity_0" class="inputbox" size="3" name="quantity" value="1"></p>
   <p><input type="submit" style="border: medium none; font-weight: bold;
   background: url(shop_image/ps_image/add-to-cart_brown.gif) no-repeat left center;
   vertical-align: middle; overflow: hidden; width: 160px; cursor: pointer;
   font-family: inherit; height: 35px; text-align: center;"
   value="Add to Cart" title="Add to Cart" id="submit1" name="submit1"></p>
   <p><input type="submit" style="width: 160px; height: 35px; text-align: center"
   value="Click me!" title="Click me!" id="submit2" name="submit2"></p>
</form>
</body>
</html>

To undoIT: to avoid the script, you could try the Mozilla/Firefox specific -moz-user-focus:ignore rule for your graphical submit buttons. Still bad for accessibility, but seemingly more adapted for the purpose.

[jqp]

I dug through the forms.css file in Firefox program folder.
I found a rule that says this:

Code: Select all

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
  padding: 0px 2px 0px 2px;
  border: 1px dotted transparent;
}

So, I copied all that to my page and just set the border to none

Code: Select all

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
border: none;
}

It worked.

So, it looks like it's using a proprietary -moz-focus-inner pseudoelement and setting a border on it to create the outline.

[Lost User 232697]

That's the ticket! Thanks jqp. Put that in my stylesheet and all is good. Glad i didn't start going through all the code and adding onfocus to the inline styles for each instance of a submit button. Is there a way to make this tip sticky? I'm guessing it would be useful to other web designers.

[jqp]

remember, though that makes things more difficult for those of us who fill out forms using a keyboard to tab through form fields. Even if you remove the border, you could do something else, like change the font color or font weight.

[Lost User 232697]

You bring up a good point. Since this is a smaller site I am working on and most people who visit it probably won't know how to tab through fields, I felt that it was more important to have things look nice asthetically over functionality.

I might get blasted for saying this, but in regards to this focus feature, I think this is one of the few things that is implemented better in Internet Explorer 6 than in Firefox. With IE6, the dotted border focus only shows up when you start tabbing through to select things. It remains hidden until the tab key is pressed. This is the best approach, since it won't screw up the way the site looks for those who don't need it, but for people who like to navigate with the keyboard, it becomes available.

Where can I submit a request for this funcionality with the Firefox development team?

[Robin_reala]

Bugzilla, but it'll almost certainly be turned down. The :focus pseudoclass is what produces this effect, and the spec says that:

The :focus pseudo-class applies while an element has the focus (accepts keyboard events or other forms of text input).

So regardless of whether an element has been focussed with a mouse or a keyboard the :focus pseudoclass will still apply.