<div style="margin:auto; padding:1rem; max-width:32rem;">
  <form action="javascript:void 0;">
    <fieldset>
      <legend>This is a legend on fieldset</legend>
      Wait 5 seconds<br>

      <label for="checkbox-input">This is a checkbox input.</label>
      <input type="checkbox" id="checkbox-input"><br>

      <label for="radio-input">This is a radio input.</label>
      <input type="radio" name="r" id="radio-input">
      <input type="radio" name="r" id="radio-input"><br>

      <label for="search-input">This is a search input.</label>
      <input type="search" id="search-input">

      <label for="select">This is a select input.</label>
      <select id="select">
        <option>Banana</option>
        <option>Cherry</option>
        <option>Lemon</option>
      </select>

      <label for="color-input">This is a color input.</label><input type="color" id="color-input">
      <label for="date-input">This is a date input.</label><input type="date" id="date-input"> <label for="datetime-local-input">This is a datetime-local input.</label><input type="datetime-local" id="datetime-local-input">
      <label for="email-input">This is a email input.</label><input type="email" id="email-input">
      <label for="file-input">This is a file input.</label><input type="file" id="file-input">
      <label for="hidden-input">This is a hidden input.</label><input type="hidden" id="hidden-input">
      <label for="image-input">This is a image input.</label><input type="image" id="image-input">
      <label for="month-input">This is a month input.</label><input type="month" id="month-input">
      <label for="number-input">This is a number input.</label><input type="number" id="number-input">
      <label for="password-input">This is a password input.</label><input type="password" id="password-input">
      <label for="range-input">This is a range input.</label><input type="range" id="range-input">
      <label for="reset-input">This is a reset input.</label><input type="reset" id="reset-input">
      <label for="submit-input">This is a submit input.</label><input type="submit" id="submit-input">
      <label for="tel-input">This is a tel input.</label><input type="tel" id="tel-input">
      <label for="text-input">This is a text input.</label><input type="text" id="text-input">
      <label for="time-input">This is a time input.</label><input type="time" id="time-input">
      <label for="url-input">This is a url input.</label><input type="url" id="url-input">
      <label for="week-input">This is a week input.</label><input type="week" id="week-input">
      <label for="datetime-input">This is a datetime input.</label><input type="datetime" id="datetime-input">

      <label for="textarea-input">This is a button input.</label>
      <textarea id="textarea-input"></textarea>
      <input type="button" value="This is a button">
    </fieldset>
  </form>

</div>
[disabled],
:disabled {
  opacity: 0.38;
  pointer-events: none;
}

label {
  margin-top: 1rem;
}

button,
input,
select,
textarea {
  display: block;
  width: 100%;
  margin: 0.5rem auto;
  padding: 0.5rem 1rem;
  border: 0.125rem solid lightgray;
  vertical-align: middle;
}
input[type="checkbox"],
input[type="radio"] {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
}

input[type="color"] {
  padding: 0;
}

button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 0;
  border-color: lightblue;
}

textarea {
  resize: vertical;
}
setTimeout(function () {
  [
    ...document.querySelectorAll("button"),
    ...document.querySelectorAll("input"),
    ...document.querySelectorAll("select"),
    ...document.querySelectorAll("textarea")
  ].forEach((element) => (element.disabled = true));
}, 5000);

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/1.1.0/modern-normalize.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.