A Pen by Angela Velasquez.

CSS-Styling-radio-button.markdown

CSS Styling radio button

Tricks giving style to a radio button .

Resource: http://css-tricks.com/almanac/selectors/c/checked/

A Pen by Angela Velasquez on CodePen.

License.

index.html

<div class="container">
  <ul>
  <li>
    <input type="radio" id="f-option" name="selector">
    <label for="f-option">Cat</label>
    
    <div class="check"><div class="inside"></div></div>
  </li>
  
  <li>
    <input type="radio" id="s-option" name="selector">
    <label for="s-option">More Cats</label>
    
    <div class="check"><div class="inside"></div></div>
  </li>
  
  <li>
    <input type="radio" id="t-option" name="selector">
    <label for="t-option">A lot of cats</label>
    
    <div class="check"><div class="inside"></div></div>
  </li>
</ul>
</div>

style.css

@import url('http://fonts.googleapis.com/css?family=Lato');

body, html{
  height: 100%;
  background: #333;
}

.container{
  display: block;
  position: absolute;
  margin: auto;
  height: 250px;
  width: 400px;
  bottom: 0; left:0; right: 0; top:0;
  padding: 0;
}

.container ul{
  list-style: none;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}


ul li{
  color: #FFF;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  height: 33.333%;
}

ul li input[type=radio]{
  position: absolute;
  top: -9999px;
}

ul li label{
  display: block;
  position: relative;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 1.35em;
  text-transform: uppercase;
  padding: 25px 25px 25px 80px;
  margin: 10px auto;
  height: 30px;
  z-index: 9;
  background: rgba(255,255,255,0.15);
  cursor: pointer;
}

ul li label:hover{
  background: rgba(255,255,255,0.45);
}

ul li .check{
  display: block;
  position: absolute;
  border: 5px solid #FFF;
  border-radius: 100%;
  height: 25px;
  width: 25px;
  top: 38%;
  left: 6%;
}

input[type=radio]:checked ~ .check {
  border: 5px solid #0DFF92;
}

input[type=radio]:checked ~ .check .inside{
  display: block;
  position: relative;
  background: #0DFF92;
  border-radius: 100%;
  height: 70%;
  width: 70%;
  top: 15%;
  margin: auto;
}

input[type=radio]:checked ~ label{
  color: #0DFF92;
}