9 #Input Inputs
In general, in order to hide an element, one of these two declarations would be ideal:
visibility: hidden;appearance: none;
However, when targeting inputs, either of those declarations also kills hints
that qutebrowser follows, so the alternative is to make it as small and
transparent as possible:
Markup
<div>
<input id="some-id" type="checkbox" class="hidden"/>
<label for="some-id" id="label" style="color: red;">Click me, I'm a checkbox!</label>
<script type="text/javascript">
var label = document.getElementById('label');
var input = document.getElementById('some-id');
input.addEventListener('click', function (event) {
label.style.color = input.checked ? 'green' : 'red';
});
</script>
</div>css/modules/input/input.css, line 1
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.
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>css/modules/input/choice-picker.css, line 10
9.2 #Input.switch Switch button
On/off button that displaces a bit and lights up (with color
var(--theme-color-adot5)) when pressed down.
Note: the checked state selector requires a generic <input>, without
enforcing any particular type (so by switch button I don't refer to an
<input> with type="button" nor to a <button>, but to a generic <input>).
Markup
<div class="switch-button">
<input id="checkbox" type="checkbox" class="hidden">
<label for="checkbox">Press me</label>
</div>css/modules/input/switch.css, line 1
9.3 #Input.toggle Toggle
A simple toggle to switch some config on/off.
Markup
<div>
<input id="toggle" class="toggle hidden" type="checkbox">
<label for="toggle"></label>
</div>css/modules/input/toggle.css, line 1