Wednesday, March 29, 2023

Toggle Visibility of a SelectBox with a CheckBox without JavaScript, only with CSS

<!DOCTYPE html>
<html>
<body>
<style>
  select {
    display: none;
  }
  .toggleselectbox:checked + .selectpivot {
    display: inline;
  }
</style>
<fieldset>
<legend>Display select box when the checkbox is checked:</legend>
<div class="custom-select" style="width:400px;">
<label for="toggleselectbox">Toggle pivot language</label>
<input type="checkbox" id="toggleselectbox" class="toggleselectbox" name="toggleselectbox" value="Toggle">
<select class="selectpivot" id="selectpivot">
    <option value="0" disabled>Select pivot language:</option>
    <option value="DE">DE</option>
    <option value="EN" selected>EN</option>
    <option value="RO">RO</option>
    <option value="IT">IT</option>
    <option value="SP">SP</option>
  </select>
</fieldset>
</div>
</body>
</html>
Display select box when the checkbox is checked:
at 10:00 AM
Labels: , ,