JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<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="a1" name="a1" value="coding"/>
    <label for="a1">Radio 1</label>
  </div>
  
  <div class="field">
    <input type="radio" id="a2" name="a1" value="music"/>
    <label for="a2">Radio 2</label>
  </div>
  
</fieldset>

CSS

body {
  padding: 10px; font-family:arial; 
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

/**
 * 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: 40px;
  height: 20px;
  border: solid 1px #cccccc;
  background-color: #dddddd;
  margin-right: 8px;
  position: relative;
  border-radius:500px;
}

[type=radio]:checked,
[type=checkbox]:checked {
  width: 40px;
  height: 20px;
  border: solid 1px #cccccc;
  background-color: #ffffff;
  margin-right: 8px;
  position: relative;
  border-radius:500px;
}

/**
 * Giving Checkbox & Radio checked state a new appearance
 */
 
 [type=radio]::before,
[type=checkbox]::before {
  content: "";
  width: 18px;
  height: 18px;
  background-color: #ffa500;
  position: absolute;
  top: 0px;
  left: 0px;
  border-radius:500px;
}

[type=radio]:checked::before,
[type=checkbox]:checked::before {
  content: "";
  width: 18px;
  height: 18px;
  background-color: #ffa500;
  position: absolute;
  top: 0px;
  left:auto;
  right: 0px;
  border-radius:500px;
}

/**
 * Rounding Radio inputs new appearance
 */

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