Issue #24173 Custom checkboxes radios correct color

[sabrown84]

Hi I took a look at this issue and I made the suggested changes to:

Custom Checkboxes/Radios Do Not Display Correct Color on :focus For Validation

Is this what you meant? Is there something else that needs to be done for this issue?

I welcome and look forward to your feedback.

Fixes #24173

[mdo]

Hey there @sabrown84, this is super close! There are two fixes we need you to make though before we can merge. The referenced issue is for the outline on focus of those fields, so we need to move this new rule to a different selector. Second is moving from hex values to some Sass variables.

I took a stab at outlining those changes in a couple comments—let me know if you have any questions about it!

[mdo]

Because this ruleset is in a Sass mixin, and we're passing parameters for the color, you'll want to tweak this line just a bit. Rather than hardcode the hex colors, use this:

box-shadow: 0 0 0 1px $body-bg, 0 0 0 3px $color;

This way, if you customize the $body-bg variable, it'll get picked up automatically here. And when we use this mixin to generate the valid and invalid styles, that color will be correct, too.

[mdo]

After you make that change, we can move this to the focus state.

.was-validated &:#{$state},
&.is-#{$state} {
  ~ .custom-control-indicator {
    background-color: rgba($color, .25);
  }
  &:focus {
    ~ .custom-control-indicator {
      box-shadow: 0 0 0 1px $body-bg, 0 0 0 3px $color;
    }
  }
}

[sabrown84]

Thank you @mdo I will make these changes send another commit. This is so helpful!

[mdo]

Pulled this down, made a few more commits to address some opacities, and also fixed the file input focus state.

[sabrown84]

Thank you @mdo. I learned a few things from this one.

[tmorehouse]

Note for custom-file inputs, the focus styling will not work in Firefox, due to how Firefox treats what is "focused" in the native file input. Firefox focuses the button inside the file input and not the file input as a whole, so the sibling selector will not work in the Firefox case.

See https://stackoverflow.com/a/20104275 and http://jsfiddle.net/Yh8re/2/ (use Firefox to test) and http://jsfiddle.net/Yh8re/23/

Firefox treats the file button and the filename label as two nested elements. Clicking the filename will cause a focus sibling selector to work, but clicking the browse button will not.
This is especially noticeable for firefox keyboard users.