radio_buttonをbutton風スタイルにしてみよう【CSS】

はじめに

チェックボックスだとデザイン的に少しチープに見えてしまうので、ボタン選択式にして少しリッチに見せる方法を、CSSを駆使してやってみようと思います。(divタグとか書くの疲れるのでslimで書かせてください)

実装

slim

.validate-button
  = f.radio_button :validate_flg, 'valid', { id: 'valid' }
  = f.label '有効', for: 'valid'
  = f.radio_button :validate_flg, 'invalid', { id: 'invalid' }
  = f.label '無効', for: 'invalid'

ラジオボタンのid属性とラベルのfor属性を同じ値にすることで、ラベルテキストで選択が効くようになります。下のdisplay: none;をコメントアウトするとラジオボタンが表示されるので、確認がてら試してしてみください。

scss

.validate-button input[type='radio'] {
  display: none;
}

.validate-button label {
  background-color: #f4f4f4;
  padding: 5px 10px;
  border-radius: 3px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125);
}

.validate-button input[type='radio']:checked + label {
  background-color: #b3b3b3;
}

.validate-button label:hover {
  background-color: #e7e7e7;
}

おわりに

まぁまぁいい感じな表示になりましたが、なんでかlabel要素にborder-colorが適用されないのが少し残念ですね..