<form action="">
  <div class="input-container">
    <h1>Checkboxes</h1>
  <input type="checkbox" value="one" name="theme" /><input type="checkbox" value="two" name="theme" /><input type="checkbox" value="three" name="theme" />
  </div>
  <div class="input-container">
  <h1>Radio Buttons</h1>
  <input type="radio" value="one" name="theme" />
  <input type="radio" value="two" name="theme" />
  <input type="radio" value="three" name="theme" />
   </div>
</form>

form{
  display:flex;
  height:100vh;
  justify-content:center;
  align-items:center;
  gap:2rem;
}
input[type="checkbox"],
input[type="radio"]{
  appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  outline: 1px solid crimson;
  outline-offset: 2px;
  border-radius: 50%;
  margin-right:1.5rem;
}
input[type="checkbox"]:checked {
  background: crimson;
}

input[type="radio"] {
  outline: 1px solid rebeccapurple;
}
input[type="radio"]:checked {
  background: rebeccapurple;
}