<fieldset>
  
  <legend>Native Checkbox</legend>
  
  <div class="field">
    <input type="checkbox" id="c1" name="c1" value="coding"/>
    <label for="c1">Checkbox 1</label>
  </div>
  
  <div class="field">
    <input type="checkbox" id="c2" name="c2" value="music"/>
    <label for="c2">Checkbox 2</label>
  </div>
  
</fieldset>
     
<fieldset>
  
  <legend>Native Radio</legend>
  
  <div class="field">
    <input type="radio" id="c1" name="c1" value="coding"/>
    <label for="c1">Radio 1</label>
  </div>
  
  <div class="field">
    <input type="radio" id="c2" name="c1" value="music"/>
    <label for="c2">Radio 2</label>
  </div>
  
</fieldset>

body {
  padding: 10px;  
}

/**
 * Aligning label + input inside a field div
 */

fieldset {
  margin-bottom: 14px;
}

.field {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}

.field:last-child {
  margin: 0;
}

/**
 * Removing the checkbox and radio appearance
 */

[type=radio],
[type=checkbox] {
   -webkit-appearance: none;
   -moz-appearance:    none;
   appearance:         none;
}

/**
 * Giving Checkbox & Radio not checked a new appearance
 */

[type=radio],
[type=checkbox] {
  width: 20px;
  height: 20px;
  border: solid 1px #cccccc;
  margin-right: 8px;
  position: relative;
}

/**
 * Giving Checkbox & Radio checked state a new appearance
 */

[type=radio]:checked::before,
[type=checkbox]:checked::before {
  content: "";
  width: 14px;
  height: 14px;
  background-color: #ffa500;
  position: absolute;
  top: 2px;
  left: 2px;
}

/**
 * Rounding Radio inputs new appearance
 */

[type=radio],
[type=radio]:checked::before{
  border-radius: 100%;
}