チェックボックスをサイトデザインに合わせたいなって時のために。 基本的には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 @import compass .custom-checkbox display: inline-block position: relative ma