842163 - Show a focus ring around <input type=range>

Status: RESOLVED FIXED

(Core :: Layout: Form Controls, defect)

Description

[Mounir Lamouri (:mounir)]

Currently, when the <input type='range'> is focused, there is no user feedback. I think we should have a focus ring like for other form controls.

Comment 1

[Jonathan Watt [:jwatt]]

Yeah, I agree. We want to fix this before shipping.

Comment 2

[Jonathan Watt [:jwatt]]

Attachment: patch

Comment 3

[Jonathan Watt [:jwatt]]

Attachment: patch

Comment 4

[Mounir Lamouri (:mounir)]

Comment on attachment 718533 [details] [diff] [review]
patch

Review of attachment 718533 [details] [diff] [review]:
-----------------------------------------------------------------

::: layout/style/forms.css
@@ +731,5 @@
>  }
>  
> +input[type="range"]:-moz-focusring {
> +  /* Don't specify the outline-color, we should always use initial value. */
> +  outline: 1px dotted;

Could you combine that with the [type='image'] rule?

Also, open a follow-up to make sure we have a better handling for native theming.

Comment 5

[Jonathan Watt [:jwatt]]

https://hg.mozilla.org/integration/mozilla-inbound/rev/ce21cc142877

Comment 6

[Ed Morley [:emorley]]

https://hg.mozilla.org/mozilla-central/rev/ce21cc142877

Comment 7

[Mounir Lamouri (:mounir)]

(In reply to Mounir Lamouri (:mounir) from comment #4)
> Also, open a follow-up to make sure we have a better handling for native
> theming.

bug 845808

Comment 8

[Ivan Vadovic]

How is the focus ring meant to be styled? I've tried input[type="range"]:-moz-focusring {outline:...} and it only adds outline and does not replace the default 1px dotted outline.