<div>
  <label>
    <input type="checkbox">
    Yes?
  </label>
</div>

<div>
  <label>
    <input type="radio" name="choice-radio">
    Yes
  </label>
  <label>
    <input type="radio" name="choice-radio">
    No
  </label>
</div>

<div>
  <label class="screen-reader-only" for="choice">Yes or No?</label>
  <span aria-hidden="true">No</span>
  <input type="range" max="1" id="choice" name="choice">
  <span aria-hidden="true">Yes</span>
</div>

<div>
  <label>
    Yes or no?
    <select>
      <option value="">---</option>
      <option value="">Yes</option>
      <option value="">No</option>
    </select>
  </label>
</div>

<div>
  <label>
    Type "yes" or "no"
    <input type="text" pattern="[Yy]es|[Nn]o">
  </label>
</div>
input[type="range"] {
  width: 30px;
}

input[type="text"]:invalid {
  outline: 2px solid red;
}

div {
  margin: 2rem;
}

.screen-reader-only {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.