Skip to content

Instantly share code, notes, and snippets.

@anjan011

anjan011/custom-radio-button-ui-using-css.html

Created December 3, 2016 17:38
Show Gist options
  • Save anjan011/f49d36a03aa3d5e5ba25a01aa8a79311 to your computer and use it in GitHub Desktop.
Save anjan011/f49d36a03aa3d5e5ba25a01aa8a79311 to your computer and use it in GitHub Desktop.
Download ZIP
Custom radio button skin using css only
Raw
custom-radio-button-ui-using-css.html
<!doctype html>
<html lang="en">
<head>
<style type="text/css">
[type=radio] {
opacity: 0;
}
[type=radio] + label::before {
background: #fff;
content: '';
display: inline-block;
border: 1px solid #444;
height: 1.2rem;
margin-right: 1em;
vertical-align: middle;
width: 1.2rem;
cursor: pointer;
border-radius: 50%;
}
[type=radio] + label:hover::before {
box-shadow: 0 0 10px green;
}
[type=radio]:checked + label::before {
background: #4caf50;
}
</style>
</head>
<body>
<p>
<input type="radio" name="option" id="op-0"> <label for="op-0">Option 0</label>
</p>
<p>
<input type="radio" name="option" id="op-1"> <label for="op-1">Option 1</label>
</p>
<p>
<input type="radio" name="option" id="op-2"> <label for="op-2">Option 2</label>
</p>
<p>
<input type="radio" checked name="option" id="op-3"> <label for="op-3">Option 3</label>
</p>
<p>
<input type="radio" name="option" id="op-4"> <label for="op-4">Option 4</label>
</p>
<p>
<input type="radio" name="option" id="op-5"> <label for="op-5">Option 5</label>
</p>
<p>
<input type="radio" name="option" id="op-6"> <label for="op-6">Option 6</label>
</p>
<p>
<input type="radio" name="option" id="op-7"> <label for="op-7">Option 7</label>
</p>
<p>
<input type="radio" name="option" id="op-8"> <label for="op-8">Option 8</label>
</p>
<p>
<input type="radio" name="option" id="op-9"> <label for="op-9">Option 9</label>
</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment