Focus styling in Firefox

[brendanfalkowski]

Hi @scottjehl — Super excited your team is still working on making this better. I refactored a project using my custom styles based on the old version and got the pixel-for-pixel same outcome.

I noticed one line on Firefox focus ring styles that uses a property I couldn't find any docs for: -moz-mac-focusring. Not sure I've ever seen a vendor-specific value before.

.select-css:focus {
	border-color: #aaa;
	/* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222; 
	outline: none;
}

The :-moz-focusring pseduo-class seems to be the standard: https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-focusring

Firefox still renders the dotted focus ring after making a selection:

I wasn't sure if it was intentional for the repo to keep this, but there is alternative focus styling for accessiblity.

I removed the -moz-mac-focusring code, and tested a technique to hide disable the dotted line (Firefox is so weird) which feels gross but works:

Are you open to PRs that modify this?

I'd also like to see styling for :disabled included so it's covered minimally. I like doing opacity: 0.5

[brendanfalkowski]

@toddparker @scottjehl — Any thoughts on this?

I see there's a PR (https://github.com/filamentgroup/select-css/pull/38) already for :disabled styles, but I'd still like to make one for the focusring changes. Just wanted to check-in if this was intentional for another reason. Because alternative focus styling was added this didn't seem necessary to retain.

[claudiopedrom]

Same doubt here regarding Firefox, any news on this?

Right now I'm using the same solution as @brendanfalkowski mentioned.