Custom range focus style issue
Created by: ysds
There is a bug in the focus style of the custom range input. Related on 6c620de0
It seems that the focus shadow is defined, but this does not apply:
Demo: http://getbootstrap.com/docs/4.1/components/forms/#range
The :focus selector must be put after the .custom-range: Also, outline: none; before the box-shadow is unnecessary.
Therefore, it can be fixed as follows:
.custom-range:focus::-webkit-slider-thumb {
box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}This fixes add focus shadow, but IE and Edge have new issue of cutting focus shadow.
Chrome:
IE11/Edge
Demo: https://codepen.io/anon/pen/BxzyNB
So we should:
- Remove the wrong focus shadow CSS? (Current style, but has accessibility issue)
- Fix the focus shadow CSS as above? (IE/Edge has issue)
- Add an alternative focus style?