What I have learned?
- How to make custom Radio Input :D
- Finally applied @jer advice on using a css sibling selector.
Nice work @oieeaaaa !
On thing you might want to keep in mind is that anything set to display: none is not available to screen readers or via the tab order -- so for those people that need a screen reader or navigate via keyboard can't interact with your switch. visibility:hidden will do the same thing.
For some unsolicited advice: One of the ways I've made this work (in a switch component in fact) is to give the label position:relative, then position your switch UI (that is, the track, knob etc) as a child of the label (and thus a direct sibling of the input). Then apply a relative position to both the input and switch ui, and position the input beneath the switch UI.
<label class="switch-container">
<input type="checkbox" value="is_dark" />
<div class="switch-ui">...</div>
</label>
This structure enables some seriously cool CSS using the adjacent sibling selector. A partial example:
input[type="checkbox"]:checked + .switch-ui {
// your checked styles here...
}
input[type="checkbox"]:focus + .switch-ui {
// your focused styles here...
}
Those two selectors effectively say "When the input checkbox is checked, give the adjacent sibling of the input that has the class switch-ui these styles." The second statement does the same when the checkbox is focused.
The benefit is that this is much less work for both you and your javascript. You just define a few states as classes and all the browser handles the rest. All your React class has to do is maintain the checked state of the input itself.
Again, this is nice work. Keep it up!
.
What are the main challenges?
Hmmm... :/
Why am I doing this anyway?
- To learn.
- To have fun.
- To future Joimee (for reference).
Resources:
How To Create a Custom Radio Button
Salamat.
Top comments (0)