WIP: Checkbox element #61
Conversation
There was a problem hiding this comment.
@ameseee Took me a sec to realize what the problem was, but then it turned out to be pretty simple :)
In your example code you'd put the <label> before the <input>, but the style for :focus was applied using the "adjacent sibling combinator" in your selector input:focus + label:before. This because there was not label after the input, no style was being applied. Putting the label after the input tag solved the problem :)
BTW, here's how to manually apply :focus on an element using Chrome dev tools:
FWIW, if this checkbox is too unwieldy I think we could simplify it a bit. I found some good tips on styling checkboxes and radio buttons on MDN - should we try this approach to get our colors into the checkbox style for starters? https://developer.mozilla.org/en-US/docs/Learn/Forms/Advanced_form_styling#styling_checkboxes_and_radio_buttons
^ with the above we wouldn't need to hide the input or import FontAwesome or do any of that other fancy stuff.
What does this PR do?
Still need to:
get checkmark icon in there (current drawing a checkmark)@tannerwelsh I have a question. I am doing something wrong and can not get the visual indicator of focus to work. I am testing it by running the doc site and tabbing through - focus is visual for the nav bar, then I tab 4 times for "nothing" then tab again and stop on a link underneath - so I know those 4 "nothing" tabs are when I'm stopping at the checkboxes. I just can't figure out what I'm missing to get that outline to show up?!