JSFiddle - React, Tailwind, and code Playground

Flat responsive Radio Input form - Bootstrap Version

by Jennifer Perrin

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<form>
  <p>Just a fun experiment. Resize browser for responsexy.</p>
 
  <fieldset>
    
    <legend>Subscription type</legend>

    <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" />
    <label for="radio-choice-1">
      Basic
      <span>You get basic stuff for this one</span>
      <strong>$5/mo</strong> 
    </label> 
   
    <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
    <label for="radio-choice-2">
      Extended
      <span>This is already a lot more</span>
      <strong>$10/mo</strong> 
    </label>
    
  </fieldset>
  
  <fieldset>
    
    <legend>Amount of awesome</legend>

    <input type="radio" name="radio-choice-2" id="radio-choice-3" value="choice-3" />
    <label for="radio-choice-3">
      Modest user
      <span>Affordable and functional</span>
      <strong>100</strong>
    </label>
    
    <input type="radio" name="radio-choice-2" id="radio-choice-4" value="choice-4" />
    <label for="radio-choice-4">
      Average user
      <span>Just a right amount of normal</span>
      <strong>200</strong>
    </label>
    
    <input type="radio" name="radio-choice-2" id="radio-choice-5" value="choice-5" checked />
    <label for="radio-choice-5" class="most-chosen">
      Active user
      <span>For active peeps</span>
      <strong>400</strong>
    </label>
    
    <input type="radio" name="radio-choice-2" id="radio-choice-6" value="choice-6" />
    <label for="radio-choice-6">
      Power user
      <span>Pretty rad this one</span>
      <strong>800</strong>
    </label>
    
    <input type="radio" name="radio-choice-2" id="radio-choice-7" value="choice-7" />
   ...

CSS

@import "//fonts.googleapis.com/css?family=Roboto+Condensed:400,700&subset=latin";
*,
*:before,
*:after {
  box-model: border-box;
}

body {
  color: #333;
  font: 20px/1.5 "Roboto Condensed", sans-serif;
  background: #eee;
  min-width: 420px;
}

form,
fieldset,
legend {
  padding: 0;
  margin: 0;
}

form {
  width: 50%;
  margin: 50px auto;
  overflow: hidden;
}

fieldset {
  margin: 60px 0;
  position: relative;
  border: 1px solid #ddd;
}

legend {
  font-weight: 600;
  position: absolute;
  top: -40px;
  border: 0;
}

input[type=radio] {
  display: none;
}

label {
  font-size: 17px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  display: block;
  padding: 15px 10px 15px 50px;
  position: relative;
  border-top: 1px solid #ddd;
  background: white;
  whitespace: no-wrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-transition: all 0.15s ease;
          transition: all 0.15s ease;
}
label:first-of-type {
  border: 0;
}
label:before {
  content: "";
  position: absolute;
  left: 14px;
  top: 14px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #d0d0d0;
}
label span {
  color: #b7b7b7;
  font-weight: normal;
  position: absolute;
  left: 35%;
}
label strong {
  color: #00aeef;
  text-align: right;
  float: right;
}

label:focus, label:hover, label:active, input:checked + label {
  color: white;
  background: #00aeef;
  border-color: white;
}
label:focus span, label:hover span, label:active span, input:checked + label span,
label:focus strong,
label:hover strong,
label:active strong,
input:checked + label strong {
  color: white;
}
label:focus:before, label:hover:before, label:active:before, input:checked + label:before {
  left: 13px;
  top: 13px;
  width: 12px;
  height: 12px;
  border: 4px solid white;
  background: #00aeef;
}

.most-chosen:after {
  content: "MOST CHOSEN";
  color: white;
  font-size: 12px;
  font-weight: normal;
  background: #333;
  position: absolute;
  right: 12%;
  top: 13px;
  display:...

JavaScript

// Bootstrap v3.1.0
// Font Awesome 4.1.0