Skip to content

Instantly share code, notes, and snippets.

@owngeek
Last active September 20, 2016 09:54
Show Gist options
  • Save owngeek/eda976aa8b3ade2fcd3b22226211e276 to your computer and use it in GitHub Desktop.
Save owngeek/eda976aa8b3ade2fcd3b22226211e276 to your computer and use it in GitHub Desktop.
Radio button
<style>
body, html{
height: 100%;
background: #000;
font-family: 'Lato', sans-serif;
}
.container{
display: block;
position: absolute;
margin: auto;
height: 450px;
width: 400px;
bottom: 0; left:0; right: 0; top:0;
padding: 0;
}
h2 {
color: #AAAAAA;
font-weight: normal;
}
.container ul{
list-style: none;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
ul li{
color: #AAAAAA;
display: block;
position: relative;
float: left;
width: 100%;
height: 100px;
border-bottom: 1px solid #111111;
}
ul li input[type=radio]{
position: absolute;
visibility: hidden;
}
ul li 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;
}
ul li:hover label{
color: #FFFFFF;
}
ul li .check{
display: block;
position: absolute;
border: 3px solid #bfcbd8;
border-radius: 100%;
height: 25px;
width: 25px;
top: 30px;
left: 20px;
z-index: 5;
transition: border .25s linear;
-webkit-transition: border .25s linear;
}
ul li:hover .check {
border: 3px solid #bfcbd8;
}
ul li .check::before {
display: block;
position: absolute;
content: '';
border-radius: 100%;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
margin: auto;
transition: background 0.25s linear;
-webkit-transition: background 0.25s linear;
}
input[type=radio]:checked ~ .check {
border: 3px solid #bfcbd8;
}
input[type=radio]:checked ~ .check::before{
background: #ce0720;
}
input[type=radio]:checked ~ label{
color: #ce0720;
}
.check { text-align:center; overflow:hidden; }
.check i{ position:relative; top:5px; left:2px; right:0; bottom:0; margin:auto; font-size:15px; color:#b9c6d4;}
</style>
<div class="container">
<ul>
<li>
<input type="radio" id="f-option" name="selector">
<label for="f-option">one</label>
<div class="check"><i class="fa fa-check"></i></div>
</li>
<li>
<input type="radio" id="s-option" name="selector">
<label for="s-option">Two</label>
<div class="check"><i class="fa fa-check"></i><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="t-option" name="selector">
<label for="t-option">Three</label>
<div class="check"><i class="fa fa-check"></i><div class="inside"></div></div>
</li>
</ul>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment