<h1>Custom Check &amp; Radio boxes -without hiding the input or using adjacent selector</h1>
<p>See Ray.H's post at <a target="_blank" href="https://www.sitepoint.com/community/t/css-for-input-checkbox/288601/11">Sitepoint</a> for more info</p>
<form>
  <input id="one" type="checkbox" name="apples" value="1">
  <label for="one">Apples</label>
  <br>
  <input id="two" type="checkbox" name="oranges" value="2">
  <label for="two">Oranges</label>
  <br>
  <input id="three" type="checkbox" name="bananas" value="3">
  <label for="three">Bananas</label>
  <br>
  <input type="reset" value="Reset Fields">
  <input type="submit" value="Submit Fruit">
</form>

<!-- example 2 input nested in label -->
<form>

  <label><input id="apples" type="radio" name="fruit" value="apples">Apples</label>
  <br>

  <label><input id="oranges" type="radio" name="fruit" value="oranges">Oranges</label>
  <br>

  <label><input id="bananas" type="radio" name="fruit" value="bananas">Bananas</label>
  <br>
  <input type="reset" value="Reset Fields">
  <input type="submit" value="Submit Fruit">
</form>

<h2>Make sure to check in current browsers before applying in the real world.</h2>

form {
  display: inline-block;
  border: 1px solid;
  border-radius: 12px;
  padding: 12px;
}
input[type="checkbox"],
input[type="radio"] {
  width: 2.2em;
  height: 2.2em;
  margin: 4px;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  border: 2px solid #800080;
  border-radius: 3px;
  vertical-align: middle;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='512px' height='512px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;fill: %23800080' xml:space='preserve'%3e%3cpath d='M448,71.9c-17.3-13.4-41.5-9.3-54.1,9.1L214,344.2l-99.1-107.3c-14.6-16.6-39.1-17.4-54.7-1.8 c-15.6,15.5-16.4,41.6-1.7,58.1c0,0,120.4,133.6,137.7,147c17.3,13.4,41.5,9.3,54.1-9.1l206.3-301.7 C469.2,110.9,465.3,85.2,448,71.9z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #eee;
  background-position: 50% 50%;
  background-size: 0 0;
  transition: 0.3s ease;
}
input[type="radio"] {
  border-radius: 50%;
}

input[type="checkbox"]:active,
input[type="radio"]:active {
  background-color: #ddd;
}
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-size: 100% 100%;
}
input[type="reset"],
input[type="submit"] {
  display: block;
  margin: 0.5em 0 0;
}
label{cursor:pointer}