I'm a bit baffled with the way the CSS outline property is rendering on Firefox 7 or below. It's clearly got a problem somewhere, but I just can't find it.
It works fine on all other main browsers (Opera, Chrome, IE, Safari).
I've added a couple of screenshots for reference. One from Firefox:
and the other from Chrome:
Here's the CSS:
form#commentform input:focus { outline: 2px outset #717377 }
Here's XHTML:
<form id="commentform">
<div>
<label for="name">
<strong>
Nom
<span id="sname"></span>
</strong>
</label>
<input type="text" tabindex="1" id="name" name="name" class="textbox" />
</div>
...
</form>
How can I solve this?
On Firefox outlines are drawn around the box-shadow
(not inside).
So you will have to serve it (using a css hack) an additional rule: outline-offset: -X
(X = shadow's length).
This bug will be fixed with Firefox 30: https://bugzilla.mozilla.org/show_bug.cgi?id=480888#c109.
Until then you could apply another box-shadow to the element, since you can have multiple box-shadows:
.element {
box-shadow: your values old box-shadow, 0 0 0 2px #717377;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With