<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" />
    <label for="radio-choice-7">
      Extreme user
      <span>You get ALL the awesome stuff</span>
      <strong>1.000</strong>
    </label>
  
  </fieldset>

  <button>Submit</button>
</form>  

<p class="footer">Design totally based on <a href="https://www.ben.nl/sim-only?looptijd=1&bellen=regelmatig&internet=regelmatig">ben.nl/sim-only</a></p>
@import "//fonts.googleapis.com/css?family=Roboto+Condensed:400,700&subset=latin"

$blue: #00aeef
$lightgray: #ddd

*,
*: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 $lightgray

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 $lightgray
  background: white
  whitespace: no-wrap
  overflow: hidden
  text-overflow: ellipsis
  
  transition: all .15s ease
  
  &:focus,
  &:hover,
  &:active
    @extend %active-label
    
  &:first-of-type
    border: 0
  
  &:before
    content: ""
    position: absolute
    left: 14px
    top: 14px
    width: 16px
    height: 16px
    border-radius: 50%
    border: 1px solid darken($lightgray, 5%)
  
  span
    color: darken($lightgray, 15%)
    font-weight: normal
    position: absolute
    left: 35%
  
  strong
    color: $blue
    text-align: right
    float: right
  

input:checked + label
  @extend %active-label
  
%active-label
  color: white
  background: $blue
  border-color: white
  
  span,
  strong
    color: white
    
  &:before
    left: 13px
    top: 13px
    width: 12px 
    height: 12px
    border: 4px solid white
    background: $blue
    
.most-chosen
  &:after
    content: "MOST CHOSEN"
    color: white
    font-size: 12px
    font-weight: normal
    background: #333
    position: absolute
    right: 12%
    top: 13px
    display: block
    padding: 5px 7px

    
button
  color: white
  background: $blue
  border: 0
  padding: 10px 15px
  float: right
    
  &:focus,
  &:hover,
  &:active
    background: #333
    outline: 0

p
  color: #666
    
a
  color: $blue
  
.footer
  text-align: center

    
      
      
@media all and (max-width: 1000px)
  .most-chosen:after
    content: none
      
      
      
@media all and (max-width: 800px)
  label
    padding-bottom: 35px
    
    &:before
      top: 25px
      
    span
      font-size: 14px
      display: block
      margin-top: 5px
      left: auto
  
  input:checked + label,
  label:focus,
  label:active,
  label:hover
    &:before
      top: 24px
    
  button
    width: 100%
    float: none

@media all and (max-width: 550px)
  label
    padding: 15px 10px 15px 50px
    
    &:before
      left: 14px
      top: 14px
      
    span
      display: none

  input:checked + label,
  label:focus,
  label:active,
  label:hover
    &:before
      left: 13px
      top: 13px
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.