630032 - [CSS] outline-color not supported on input:focus

Status: RESOLVED INVALID

(Core :: Layout: Form Controls, defect)

Description

[Pierre Rudloff]

User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en; rv:1.9.2.15pre) Gecko/20110126 Camino/1.6 (like Firefox/3.6.15pre)
Build Identifier: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0b11pre) Gecko/20110130 Firefox/4.0b11pre

When using something like
input:focus{
outline-color: red;	
}
the outline is still blue (or red, depending on your system prefs).

Reproducible: Always




This works in Safari.

Comment 1

[Pierre Rudloff]

Attachment: Testcase

Comment 2

[:Ms2ger (he/him; ⌚ UTC+1/+2)]

That's not what outline-color is supposed to control. outline-color is related to the outlines defined in CSS: <http://dev.w3.org/csswg/css3-ui/#outline-properties>.

If you add input { outline: thin solid; } to the style sheet in your test case, you can see the difference and will notice that *that* outline does change.

Comment 3

[Boris Zbarsky [:bzbarsky]]

Verified.  Safari on Mac uses the CSS outline for the focus glow, as far as I can tell (more precisely, it uses a vendor-specific outline style on focused inputs), whereas we draw a CSS outline separate from the native OS widget rendering (which is what draws the focus glow in our case).