<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Checkboxes styled</title>
  </head>
  <body>
    <form>
      <fieldset>
        <legend>Fruit preferences</legend>

        <p>
          <label>
            <input type="checkbox" name="fruit" value="cherry">
            I like cherry
          </label>
        </p>
        <p>
          <label>
            <input type="checkbox" name="fruit" value="banana" disabled>
            I can't like banana
          </label>
        </p>
        <p>
          <label>
            <input type="checkbox" name="fruit" value="strawberry">
            I like strawberry
          </label>
        </p>
      </fieldset>
    </form>
  </body>
</html>
input[type="checkbox"] {
  appearance: none;
}

input[type="checkbox"] {
  position: relative;
  width: 1em;
  height: 1em;
  border: 1px solid gray;
  /* Adjusts the position of the checkboxes on the text baseline */
  vertical-align: -2px;
  /* Set here so that Windows' High-Contrast Mode can override */
  color: green;
}

input[type="checkbox"]::before {
  content: "✔";
  position: absolute;
  font-size: 1.2em;
  right: 0;
  top: -0.3em;
  visibility: hidden;
}

input[type="checkbox"]:checked::before {
  /* Use `visibility` instead of `display` to avoid recalculating layout */
  visibility: visible;
}

input[type="checkbox"]:disabled {
  border-color: black;
  background: #ddd;
  color: gray;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.