9.1 #Input.choice-picker Opacity-based choice picker.
A disk shown for each possible choice; the disk of the selected choice is 100%
opaque, whereas the others are 50%. The transition happens in a time determined
by var(--transition-time).
Note: the actual input is to be hidden via another module.
Note: the inner <div>s in the example below are just examples, and can be
chaged to other tags, such as <svg> or the likes; also the outer <div> can be
changed. On the other hand, <input> and <label> cannot be changed as they are
targeted as selectors.
Example
Markup
<div class="choice-picker">
<input type="radio" id="choice1" name="choices" checked="checked">
<label for="choice1">
<div style="width: 3em; height: 3em; background-color: black; border-radius: 100%;"></div>
</label>
<input type="radio" id="choice2" name="choices">
<label for="choice2">
<div style="width: 3em; height: 3em; background-color: black; border-radius: 100%;"></div>
</label>
<input type="radio" id="choice3" name="choices">
<label for="choice3">
<div style="width: 3em; height: 3em; background-color: black; border-radius: 100%;"></div>
</label>
</div>
Source:
css/modules/input/choice-picker.css, line 10