<main>
  <h2>Custom Radio Buttons and Checkboxes with CSS</h2>

  <fieldset>
    <legend>Which Do You Prefer?</legend>
    <label for="veg"><input type="radio" id="veg" value="vegetables" name="prefer" checked required>Vegetables</label>
    <label for="pizza"><input type="radio" id="pizza" value="pizza" name="prefer" required>Pizza</label>
  </fieldset>
  <fieldset>
    <legend>How Do You Like Your Eggs?</legend>
    <label for="sunny"><input type="checkbox" id="sunny" value="sunny" name="eggs" checked required>Sunny Side Up</label>
    <label for="overeasy"><input type="checkbox" id="overeasy" value="overeasy" name="eggs" required>Over Easy</label>
  </fieldset>
</main>

body {
  font-family: Arial, sans-serif;
  font-size: 20px;
  padding: 0 20px;
}

main {
  text-align: center;
  margin: 0 auto;
  max-width: 800px;
}

p {
  text-align: left;
  padding: 0 20px;
}

code {
  color: firebrick;
}

fieldset {
  margin-bottom: 40px;
  border-radius: 10px;
  padding: 30px;
}

/* Context for relative positioning */
label {
  position: relative;
}

/* Base styles for both types of inputs */
input[type="radio"],
input[type="checkbox"] {
  appearance: none;
  background: #fff;
  border: 2px solid #777;
  height: 1.5em;
  width: 1.5em;
  margin: 0 10px 0 30px;
  border-radius: 100%;
  vertical-align: text-bottom;
  position: relative;
}

/* Remove the circular shape from checkboxes */
input[type="checkbox"] {
  border-radius: 0;
}

/* Styles for the pseudo-elements */
input[type="radio"]::before,
input[type="checkbox"]::before {
  content: "";
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  top: 0;
}

/* Center of the checked radio button */
input[type="radio"]:checked::before {
  border: 5px solid transparent;
  border-radius: 100%;
  background: hotpink;
  margin: 4px;
}

/* The checkmark shape */
input[type="checkbox"]:checked::before {
  border-right: 5px solid hotpink;
  border-bottom: 6px solid hotpink;
  height: 90%;
  width: 30%;
  transform: rotate(50deg) translateY(-20%) translateX(-10%);
}

/* Some focus styles for accessibility */
input[type="radio"]:focus,
input[type="checkbox"]:focus {
  outline: solid 1px;
  outline-offset: 2px;
}