Repository navigation
Custom Checkboxes/Radios Do Not Display Correct Color on :focus For Validation #24173
Description
In the documentation: https://getbootstrap.com/docs/4.0/components/forms/#supported-elements
Tab or via dev tools set :focus on custom radio or checkbox and outlined focus state is default color instead of the appropriate validation state color.
Also, should the appended and prepended elements (like the Browse button on the custom file input) show the proper validation state colors? Seems a bit off having only the input part of the element styled.
Activity
Joyrex commentedon Sep 29, 2017
Anyone looking for a quick fix, here's the CSS required to style these correctly:
.custom-control-input.is-invalid~.custom-control-indicator, .was-validated .custom-control-input:invalid~.custom-control-indicator { box-shadow: 0 0 0 1px #fff, 0 0 0 3px #dc3545; }This is only for the
invalidstate.