There is a bug in the focus style of the custom range input. Related on 6c620de

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?