Ruby on Rails中Simple_form的collection_radio_buttons样式定制问题

方案1：直接用内联样式（完全支持） #

可以给单选按钮通过input_html参数设置内联样式，同时把文本用<span>包裹单独调整，或者给label本身加样式，完全避开全局样式的影响：

<%= b.label style: "cursor: pointer;" do %>
  <%= b.radio_button input_html: { style: "margin-right: 8px;" } %>
  <span style="font-size: 14px;"><%= b.text %></span>
<% end %>

这样直接给单选按钮加右边距，文本也能单独调整字号、颜色等样式，完全独立于全局样式。

方案2：局部作用域CSS（推荐，更易维护） #

如果不想用内联样式，给当前多选组的父容器加一个唯一类名，用CSS后代选择器精准定位，不会影响全局的radio样式：

1. 给外层div加自定义类：

<div class="flex-col inline-block items-center mr-4 my-5 custom-multiple-choice">

2. 在CSS文件中添加局部样式：

/* 仅作用于这个多选组下的元素 */
.custom-multiple-choice input[type="radio"] {
  margin-right: 8px;
}

.custom-multiple-choice label {
  cursor: pointer;
  /* 其他自定义样式 */
}

这种方式比内联样式更便于后续修改，同时不会污染全局样式。

方案3：拆分label结构（更灵活控制） #

把radio按钮和文本分开编写，完全掌控每个元素的结构和样式：

<div class="flex items-center mb-4">
  <span class="flex items-center cursor-pointer text-md">
    <%= b.radio_button input_html: { class: "mr-2" } %>
    <%= b.label b.text, class: "ml-0" %>
  </span>
</div>

这里给radio按钮加mr-2类（如果用Tailwind CSS的话），或者自定义类来控制间距，label也能单独设置样式，结构更清晰。

内容的提问来源于stack exchange，提问作者Felipe Brandalise