Completely CSS: Custom checkboxes, radio buttons and select boxes

completely-css-custom-checkboxes-radio-buttons-and-select-boxes.markdown

Completely CSS: Custom checkboxes, radio buttons and select boxes

CodePen demo for: http://kyusuf.com/post/completely-css-custom-checkbox-radio-buttons-and-select-boxes

A Pen by Kenan Yusuf on CodePen.

License.

index.html

<div class="container">
  <div class="control-group">
    <h1>Checkboxes</h1>
    <label class="control control--checkbox">First checkbox
      <input type="checkbox" checked="checked"/>
      <div class="control__indicator"></div>
    </label>
    <label class="control control--checkbox">Second checkbox
      <input type="checkbox"/>
      <div class="control__indicator"></div>
    </label>
    <label class="control control--checkbox">Disabled
      <input type="checkbox" disabled="disabled"/>
      <div class="control__indicator"></div>
    </label>
    <label class="control control--checkbox">Disabled & checked
      <input type="checkbox" disabled="disabled" checked="checked"/>
      <div class="control__indicator"></div>
    </label>
  </div>
  <div class="control-group">
    <h1>Radio buttons</h1>
    <label class="control control--radio">First radio
      <input type="radio" name="radio" checked="checked"/>
      <div class="control__indicator"></div>
    </label>
    <label class="control control--radio">Second radio
      <input type="radio" name="radio"/>
      <div class="control__indicator"></div>
    </label>
    <label class="control control--radio">Disabled
      <input type="radio" name="radio2" disabled="disabled"/>
      <div class="control__indicator"></div>
    </label>
    <label class="control control--radio">Disabled & checked
      <input type="radio" name="radio2" disabled="disabled" checked="checked"/>
      <div class="control__indicator"></div>
    </label>
  </div>
  <div class="control-group">
    <h1>Select boxes</h1>
    <div class="select">
      <select>
        <option>First select</option>
        <option>Option</option>
        <option>Option</option>
      </select>
      <div class="select__arrow"></div>
    </div>
    <div class="select">
      <select>
        <option>Second select</option>
        <option>Option</option>
        <option>Option</option>
      </select>
      <div class="select__arrow"></div>
    </div>
    <div class="select">
      <select disabled="disabled">
        <option>Disabled</option>
        <option>Option</option>
        <option>Option</option>
      </select>
      <div class="select__arrow"></div>
    </div>
  </div>
</div>

style.stylus

$color--white = #FFFFFF
$color--black = #000000
$color--light-grey = #E6E6E6
$color--grey = #CCCCCC
$color--dark-grey = #7B7B7B
$color--primary = #2AA1C0
$color--secondary = #0E647D

html, body
  height 100%

body
  background $color--light-grey
  font-family 'Source Sans Pro', sans-serif

.container
  width 100%
  height 100%
  display flex
  flex-wrap wrap
  justify-content center
  align-items center

h1
  font-family 'Alegreya Sans', sans-serif
  font-weight 300
  margin-top 0

// Box to contain form controls
.control-group
  display inline-block
  vertical-align top
  background $color--white
  text-align left
  box-shadow 0 1px 2px rgba(0, 0, 0, 0.1)
  padding 30px
  width 200px
  height 210px
  margin 10px

// Basic control styles
.control
  display block
  position relative
  padding-left 30px
  margin-bottom 15px
  cursor pointer
  font-size 18px
  
  // Hide default browser input
  input
    position absolute
    z-index -1
    opacity 0
    

// Custom control
.control__indicator
  position absolute
  top 2px
  left 0
  height 20px
  width 20px
  background $color--light-grey
  
  .control--radio &
    border-radius 50% // Makes radio buttons circlular
  
  // Hover and focus
  .control:hover input ~ &,
  .control input:focus ~ &
    background $color--grey
  
  // Checked
  .control input:checked ~ &
    background $color--primary

  // Hover when checked
  .control:hover input:not([disabled]):checked ~ &,
  .control input:checked:focus ~ &
    background $color--secondary
  
  // Hide default browser input
  .control input:disabled ~ &
    background $color--light-grey
    opacity 0.6
    pointer-events none

  &:after
    content ''
    position absolute
    display none // Hide check

    .control input:checked ~ &
      display block // Show check
 
    // Checkbox tick
    .control--checkbox &
      left 8px
      top 4px
      width 3px
      height 8px
      border solid $color--white
      border-width 0 2px 2px 0
      transform rotate(45deg)
    
    // Disabled tick colour
    .control--checkbox input:disabled ~ &
      border-color $color--dark-grey

    // Radio button inner circle
    .control--radio &
      left 7px
      top 7px
      height 6px
      width 6px
      border-radius 50%
      background $color--white

    // Disabled circle colour
    .control--radio input:disabled ~ &
      background $color--dark-grey
      
.select
  position relative
  display inline-block
  margin-bottom 15px
  width 100%

  select
    display inline-block
    width 100%
    cursor pointer
    padding 10px 15px
    outline 0
    border 0
    border-radius 0
    background $color--light-grey
    color $color--dark-grey
    appearance none
    -webkit-appearance none
    -moz-appearance none
    
    &::-ms-expand
      display none
    
    &:hover,
    &:focus
      color $color--black
      background $color--grey
  
    &:disabled
      opacity 0.5
      pointer-events none
      
.select__arrow
  position absolute
  top 16px
  right 15px
  width 0
  height 0
  pointer-events none
  border-style solid
  border-width 8px 5px 0 5px
  border-color $color--dark-grey transparent transparent transparent
  
  .select select:hover ~ &
  .select select:focus ~ &
    border-top-color $color--black
  
  .select select:disabled ~ &
    border-top-color $color--grey