3 ms·
That's a very good point, but it requires a lot of code: <form id=theme> <label for=theme-l>light</label><input id=theme-l type=radio name=theme value=l>
by abrudz 3y ago
That's a very good point, but it requires a lot of code:
<form id=theme>
<label for=theme-l>light</label><input id=theme-l type=radio name=theme value=l>
<input id=theme-d type=radio name=theme value=d checked><label for=theme-d>dark</label>
</form>
<style>
input:checked{position:relative;z-index:1}
input+input{margin-left:-1em}
</style>
It is ugly, hard to style right, doesn't have toggle semantics, and needs strange code like theme.theme.value to get the value.
I'd much rather write:
<select type=switch id=theme>
<option value=l>light</option>
<option value=d selected>dark</option>
</select>
And it'd be an actual switch with one label on each side and I'd get the value with theme.value
- Izkata 3y agoIf you nest the input and label you can get rid of "for" and "id": <label>light<input type=radio name=theme value=l></label>
- extra88 3y agoThat's totally valid HTML. Unfortunately, voice control software (Dragon NaturallySpeaking, macOS's feature) doesn't recognize the relationship unless it's explicit.