Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  <meta charset="utf-8">
  <title>Demo by Roko C.B.</title>
</head>
<body>
  <input type="radio" name="r" id="r1"><label for="r1">Radio 1</label>
  <input type="radio" name="r" id="r2"><label for="r2">Radio 2</label>
  
  
  <br><br>
  
  
  <input type="checkbox" name="c1" id="c1"><label for="c1">Check 1</label>
  <input type="checkbox" name="c2" id="c2"><label for="c2">Check 2</label>
  <input type="checkbox" name="c3" id="c3"><label for="c3">Check 3</label>  
  
  
  
  
  
  
</body>
</html>
 
/* COMMON RADIO AND CHECKBOX STYLES  */
input[type=radio],
input[type=checkbox]{
  /* hide original inputs */
  visibility: hidden;
  position: absolute;
}
input[type=radio] + label,
input[type=checkbox] + label{
  cursor:pointer;
}
input[type=radio] + label:before,
input[type=checkbox] + label:before{
  height:16px;
  margin-right: 4px;
  content: " ";
  display:inline-block;
  vertical-align: baseline;
  transition: 0.3s;
  border:1px solid #ccc;
  border-radius:10px;
  box-shadow: inset 0 -3px 6px #e4e4e4;
  transition: 0.3s;
}
/* CUSTOM RADIO AND CHECKBOX STYLES */
/* DEFAULT */
input[type=radio] + label:before{
  border-radius:50%;
  width:16px;
}
input[type=checkbox] + label:before{
  border-radius:2px;
  width:26px;
}
/* CHECKED */
input[type=radio]:checked + label:before{
  box-shadow: inset 0 -1px 3px #e4e4e4, inset 0 0 1px #222, inset 0 0 0 3px gold;
}
input[type=checkbox]:checked + label:before{
  box-shadow: inset 0 -1px 3px #e4e4e4, inset 0 0 1px #222, inset 0 0 0 3px gold;
}
body{font:16px/1 Helvetica, arial, sans-serif;color:#555;}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
roXonpro
0viewers