Radio buttons quick CSS styling in black and red

black-and-red-radio-buttons.css

/* RADIO BUTTONS STYLYNG */
input[type='radio'] {
  -webkit-appearance:none;
  width:18px;
  height:18px;
  border:2px solid black;
  border-radius:50%;
  outline:none;
  margin: 0; padding: 0;
}
input[type='radio']:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 50%;
  border: 3px solid white;  
}
input[type='radio']:checked:before {
  background:red;
}
input[type='radio']:checked {
  border:2px solid red;
}
/* ...AND CHECKBOX STYLING! */
input[type='checkbox'] {
  -webkit-appearance:none;
  width:18px;
  height:18px;
  border:2px solid black;
  border-radius:25%;
  outline:none;
  margin: 0; padding: 0;
  vertical-align: text-top;
}
input[type='checkbox']:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 45%;
  border: 3px solid white; 
}
input[type='checkbox']:checked:before {
  background: #f36b24;
}
input[type='checkbox']:checked {
  border:2px solid #f36b24;
}