Skip to content

Instantly share code, notes, and snippets.

@cjwebdev

cjwebdev/gist:63f7386cd7c030c7fa19ba61f21be844

Created August 4, 2017 03:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cjwebdev/63f7386cd7c030c7fa19ba61f21be844 to your computer and use it in GitHub Desktop.
Save cjwebdev/63f7386cd7c030c7fa19ba61f21be844 to your computer and use it in GitHub Desktop.
Download ZIP
Custom radio checkbox
Raw
gistfile1.txt
<html>
<head>
<style>
div input[type=radio]{
position: absolute;
visibility: hidden;
}
div label{
display: block;
position: relative;
font-weight: 300;
font-size: 1.35em;
padding: 25px 25px 25px 80px;
margin: 10px auto;
height: 30px;
z-index: 9;
cursor: pointer;
-webkit-transition: all 0.25s linear;
}
div:hover label{
color: #FFFFFF;
}
div .check{
display: block;
position: absolute;
border: 5px solid #AAAAAA;
border-radius: 100%;
height: 25px;
width: 25px;
top: 30px;
left: 20px;
z-index: 5;
transition: border .25s linear;
-webkit-transition: border .25s linear;
}
div:hover .check {
border: 5px solid #FFFFFF;
}
div .check::before {
display: block;
position: absolute;
content: '';
border-radius: 100%;
height: 15px;
width: 15px;
top: 5px;
left: 5px;
margin: auto;
transition: background 0.25s linear;
-webkit-transition: background 0.25s linear;
}
input[type=radio]:checked ~ .check {
border: 5px solid #0DFF92;
}
input[type=radio]:checked ~ .check::before{
background: #0DFF92;
}
input[type=radio]:checked ~ label{
color: #0DFF92;
}
</style>
</head>
<body>
<div>
<input type="radio" id="f-option" name="selector">
<label for="f-option">Pizza</label>
<div class="check"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment