My pattern library

9 #Input Inputs

Toggle example guides Toggle HTML markup

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:

Example
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>
Source: css/modules/input/input.css, line 1