CSSでチェックボックス、ラジオボタンのデザインをいじる

チェックボックスをサイトデザインに合わせたいなって時のために。
基本的にはCSSで弄れないので。

チェックのデザインはみんな大好きFont Awesome( http://fortawesome.github.io/Font-Awesome/ )

DEMO

• デフォルトのinputは要らない子なのでopacity: 0 と position: absolute で空気に。
• これでinputが見た目空気になったので、チェックボックスがチェックされてない状態を用意。今回は label::beforeのborderでそれっぽく。
• チェックはinput:checkedを使って兄弟要素の %i.icon-ok のopacityをトグルする。

haml

%label.custom-checkbox
  %input{type: "checkbox"}
  %i.icon-ok
  チェックボックス

sass

@import compass

.custom-checkbox
  display: inline-block
  position: relative
  margin: 0 1rem 1rem
  padding: 1px 0 0 2px
  cursor: pointer

  &:before,
  &::before
    content: ""
    position: absolute
    top: 3px
    left: 0
    height: 13px
    width: 13px
    border: 2px solid
    +border-radius(2px)

  input
    position: absolute
    +opacity(0)

    & + i
      margin-right: 3px
      +opacity(0)
      +single-transition(opacity,100ms,linear)

    &:checked + i
      +opacity(1)

.custom-radio
  @extend .custom-checkbox
  padding: 3px 0 0 4px


  &:before,
  &::before
    height: 16px
    width: 16px
    +border-radius(10px)

label内のテキストをspanかなんかでくくって
そいつのbeforeとafter使えば%i.icon-okも減らせるけど
でも結局その分のCSSを書かないといけないので一先ずこれで。