Chosen outline color on focus doesn't match browser default

[BobDankert]

When the Chosen select is focused, for example tabbing through form fields, the outline color for the field doesn't match the browser default. For example, a typical field in chrome gets this when focused: outline: -webkit-focus-ring-color auto 5px;. Unfortunately, it looks like this style is manually set in the Chosen CSS as this: border: 1px solid #5897fb;. Also, it looks as though this must be set using javascript instead of actually giving focus to the element and relying on the :focus selector.

Also, these type of highlights should ideally be outline to match default browser stylesheets, rather then border colors. W3C suggests in 18.4.1 (http://www.w3.org/TR/CSS21/ui.html#outline-focus) that outline be used with focus.

[stof]

@BobDankert It cannot be set through :focus as this color is set when the Chosen container is active, which does not necessarily means that the search field has the focus. Unlike native selects, each dropdown item is a different element which can get the focus (thus removing it from the search field of the dropdown)

[BobDankert]

I haven't looked at it in much detail, but if focus could somehow be given to the A.chosen-single element when tabbing to the field, it would match the default browser style. (edit: for example, in chrome inspector, toggling the :focus element state on the A.chosen-single element causes the chosen field to get the default browser focus style).

I realize there is likely some technical challenge(s) preventing this, but it is certainly a pain when this beautiful component does not match the default functionality of other components on the form.

[starzonmyarmz]

but it is certainly a pain when this beautiful component does not match the default functionality of other components on the form

Something else to keep in mind here is that different browsers will render :focus differently (Firefox and Webkit are similar, but IE is different and also varies across versions). I don't like the idea of using browser sniffing for serving different styles or classes to hook onto for styling.

[BobDankert]

@starzonmyarmz I agree completely, that's why I would much prefer to somehow get the component to use the standard focus implementation to render the outline/whatever CSS the browser has in it's default stylesheet.

[starzonmyarmz]

I see what you're saying now. I did a quick test and replaced the current chosen-container-active .chosen-single styles with outline: -webkit-focus-ring-color auto 5px; and it resulted in the following:

This is somewhat expected because outline is outside the box-model, so it won't follow the border-radius. Changing outline to border doesn't work since auto is an invalid value for border-style. Aside from this, I'm not aware of an equivalent value to -webkit-focus-ring-color for Firefox or IE (a really quick google at least didn't turn up any results). This brings us back to square one with browser sniffing :-1:

Maybe @mlettini has something to add here?

[mlettini]

outline: -webkit-focus-ring-color auto 5px; works, but for -webkit only. But we'd have to then also figure out how to replicate the default focus design for other browsers (FF and IE). And the reason we'd have to replicate it is as @stof mentions, that this is not a native form element, so :focus won't work or automatically add styles.

I found this article about css colors, and -moz-mac-focusring seems to work for FF, though I haven't tested it on PC. The other problem with FF is that I can't seem to make it blurred, just solid: (note my Mac is on Graphite not Aqua)

So I'm not sure what to add here except that, since we can't just rely on :focus, we'd have to replicate every browser's default. We could look into that possibility (might be doable with more research), but it was a bit easier initially to make 1 standard focus style for all browsers - and that still might be the simplest way for Chosen to do it.

[koenpunt]

I assume we could use system styles; https://www.sitepoint.com/css-system-styles/

[koenpunt]

And this might be applicable: https://ghinda.net/article/mimic-native-focus-css/

[MrMacvos]

With all your tips and googling a bit, I came to this solution, which seems to work ok: .chosen-container.chosen-container-active { outline: highlight auto 1px; outline: -webkit-focus-ring-color auto 1px; }