하고 싶었던 일

라디오 버튼의 외형을 멋지게하고 싶다 (자크리)

입력의 type 속성은 라디오로 유지하고 싶습니다

CSS 편집은 최소한으로 유지하고 싶습니다

했던 일

Bootstrap 4 Button plugin 적용

상세

Bootstrap 4 도입

Rails에 Bootstrap 4를 도입하는 절차는 아래 게시물에서 설명합니다.

Rails 앱에서 Bootstrap 4 사용 - Qiita

버튼 플러그인 적용

Bootstrap 4의 공식 문서에 체크 박스나 라디오 버튼의 외형을 버튼으로 하는 샘플이 게재되고 있었으므로, 이쪽을 참고로 구현했습니다.

버튼 플러그인/체크박스 및 라디오 버튼

Before

양식의 라디오 버튼 부분을 발췌

<div class="form-group row">
  <div class="col-sm-2">
    <%= f.label :sex, '性別', {class: 'form-label'} %>
  </div>
  <div class="col-sm-10">
    <%= f.radio_button :sex, 0, {checked: true} %> 男性
    <%= f.radio_button :sex, 1, {} %> 女性
  </div>
</div>

After

양식의 라디오 버튼 부분을 발췌

<div class="form-group row">
  <div class="col-sm-2">
    <%= f.label :sex, '性別', {class: 'form-label'} %>
  </div>
  <div class="col-sm-10 btn-group" data-toggle="buttons">
    <label class="btn btn-outline-secondary active" style="width:50%">
      <%= f.radio_button :sex, 0, {checked: true} %> 男性
    </label>
    <label class="btn btn-outline-secondary" style="width:50%">
      <%= f.radio_button :sex, 1, {} %> 女性
    </label>
  </div>
</div>