Conversation
* Put `:focus` selector right after `.custom-range` * Remove unnecessary `outline: none`
|
|
||
| // Pseudo-elements must be split across multiple rulesets to have an affect. | ||
| // No box-shadow() mixin for focus accessibility. | ||
| &::-webkit-slider-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; } |
There was a problem hiding this comment.
@ysds Doesn't autoprefixer take care of the prefixes?
There was a problem hiding this comment.
Not in the selectors, no. All these need to be split as the comment says or no browser picks it up. Strange, but it's common across most of these form styles.
There was a problem hiding this comment.
As @mdo said. Also I found @ai's comment in postcss/autoprefixer#279
Main problem here, that we absolutly didn’t know unprefixed version of this selectors. Autoprefixer is developed to be able to remove Autoprefixer and future and your CSS will be worked.
Try PostCSS and create polyfill.
There was a problem hiding this comment.
Autoprefixer can add prefixes in selectors (like it support :: placeholder). But Autoprefixer need to have W3C draft to have unprefixed version.
There was a problem hiding this comment.
Yeah, I was mostly wondering :)
Fixes #26379 and thumb positions.
Demo: https://codepen.io/anon/pen/GdjKop