대상 독자

radio button의 디자인에 능숙하고,
원래 버튼을 만들고 싶다! ! 라고 생각하는 사람

환경

rails 5.2.3
루비 2.5.1

배경

커리큘럼으로 메르카리의 클론 사이트를 만들고 있습니다.
그 중에서 사용자의 평가 기능을 구현할 때 haml, scss를 작성하는 방법으로 빠졌습니다.

목적

마무리는 이쪽

납치 해설

아래는 최종적인 haml의 기술(버튼 1개분)

new.html.haml

.evaluation
    .evaluation__container
      .evaluation__container__evaluate-box
        = f.radio_button :rating, "1", id:"evaluation__good", class: "evaluation__container__evaluate-box__radio-btn" 
        .evaluation__container__evaluate-box__good
          = f.label "良い", for:"evaluation__good", class: "evaluation__good" do
            .evaluation__container__evaluate-box__good__btn
              = fa_icon "smile-o"

이런 느낌으로 써 보았습니다.
f.radio_button [컬럼 이름], [선택했을 때 컬럼에 넣고 싶은 값], id, class
f.label [라벨 이름], for:[연동시키고 싶은 radio button의 id], class

완성 scss는 이쪽

new.scss

 &__evaluate-box {
      margin:40px auto;
      width: 500px;
      display: flex;
      justify-content: space-around;

      &__radio-btn {
        &:checked + .evaluation__container__evaluate-box__good {
          border: 2px solid #ea352b;
        }
      }
      &__good {
        display: inline-block;
        height: 100px;
        width: 80px;
        border: 2px solid gray;
        border-radius: 4px;
        &__btn{
          font-size: 57px;
          text-align: center;
          color: #ea352b;
          i {
            &::after {
              display: block;
              content: '良い';
              font-size: 20px;
              color: black;
            }
          }
        }
      }

#evaluation__good {
  display: none;
}

label for

label에 for를 붙이면, radio button과 연동하게 된다
이번이라면, radio button의 id와, label의 for에 같은 이름을 가지면 label 요소를 클릭해 선택할 수 있게 된다.

radio button 숨기기

이번에는 마루포치의 라디오 버튼은 없고, 단지 버튼만 표시하고 싶었기 때문에, radio button의 id를 사용하여 display: none을 써 보이지 않게 하고 있습니다. class의 evaluation_containerevaluate-box_radio-btn에 기술해도 괜찮을 것 같습니다만, 버튼이 통째로 없어져 버렸으므로, 나누어 기술해 보았습니다.

버튼을 선택할 때 CSS 변경

라디오 버튼의 경우, :checked를 붙이면 좋은 것은 여러가지 기사로부터 알았지만, 어떻게 써도 좋은지 몰랐다. 여기가 제일은 빠진 곳.

:checked를 받을 수 있는 것은 radio button일 것이므로, radio button을 지정하는 클래스에 붙일 필요가 있다.

지금하고 싶은 것은 라디오 버튼이 아니라 보이는 일반 버튼이며 라디오 버튼을 동일한 기능을 갖게하는 것입니다.
그래서 라디오 버튼과 연동시킨 label에, 외형의 변경을 기술할 필요가 있습니다.
그것이이 부분.

      &__radio-btn {
        &:checked + .evaluation__container__evaluate-box__good {
          border: 2px solid #ea352b;
        }

그래서 조심하고 싶은 포인트
+와 (반각 스페이스)는 상당히 의미가 다릅니다.

css에서
+는 인접한 선택기이며 형제 요소, 즉 동일한 깊이의 요소에 영향을줍니다.
반각 공간은 자손 선택기이며, 자손 요소, 즉 들여 쓰기가 더 낮은 요소에 영향을 미친다는 것입니다.

그래서 이번 쓰기 방법이라고

radio-btn이 checked되었을 때는 형제 요소인 evaluationcontainer_evaluate-box_good의 border를 바꿀 것이다.

됩니다

fa-icon

젬에 'font-awesome-rails'를 넣고 있기 때문에 이렇게 기술하는 것만으로 필요한 아이콘이 표시됩니다.
다만, 이 젬이라고 fontwesome4로,
최신 fontwesome 5에는 대응하지 않으므로,
앞으로 할 분은 'font-awesome-sass'를 넣는 것이 좋습니다.
htps : // 기주 b. 코 m / 후 r 타우 소메 / 후 우 t 아우 소메 - 사 s

끝에

잘못된 내용 등 있으면 지적해 주시면 감사하겠습니다.

참고 기사

클릭하면 색이 바뀌는 아이콘을 HTML/CSS로 간단하게 만든다
라디오 버튼을 CSS로 다른 모양으로 해 본 메모