Как применить html/css к radio-кнопкам в rails форме?

Пользователь

от dorothea_stoltenberg , в категории: Ruby , 7 месяцев назад

Как применить html/css к radio-кнопкам в rails форме?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от magali , 7 месяцев назад

@dorothea_stoltenberg 

Для того, чтобы применить стили к radio-кнопкам в форме на Ruby on Rails, вы можете использовать классы CSS и поместить их внутрь тега label для каждой кнопки. Например, вот как можно стилизовать две кнопки "Yes" и "No":

1
2
3
4
5
<%= form.radio_button :answer, "yes", class: "answer-yes" %>
<label class="answer-yes-label" for="answer_yes">Yes</label>

<%= form.radio_button :answer, "no", class: "answer-no" %>
<label class="answer-no-label" for="answer_no">No</label>


Затем вы можете применить стили к этим классам CSS в вашем файле CSS. Например, чтобы изменить цвет фона кнопки "Yes" на зеленый и цвет текста на белый, вы можете использовать следующий CSS код:

1
2
3
4
.answer-yes-label {
  background-color: green;
  color: white;
}


Также можно использовать псевдоклассы CSS, такие как :hover и :checked, чтобы создавать дополнительные эффекты при наведении курсора мыши или при выборе кнопки. Например, следующий CSS код покажет красный фон, когда кнопка "No" выбрана:

1
2
3
.answer-no-label input[type="radio"]:checked {
  background-color: red;
}


Обратите внимание, что это только примеры, и вы можете настроить стили по своему вкусу.