如何隐藏radio_button并使用div / label作为按钮？ （Ruby on Rails）

Question

在一个简单表单中，我试图设置单选按钮的样式。

但是如何隐藏单选按钮并通过单击标签来选择table_id？

  <% Table.all.each do |rt| %>
    <div class="btn-group" data-toggle="buttons-radio">
      <%= f.radio_button :table_id, "fd", :id=>"hi-#{rt.id}", :style=>"display:none;" %>
      <label for="hi-#{rt.id}" class="btn btn-primary box3"><%= rt.id %>
      </label>
    </div>
  <% end %>

注释：

表has_many：预订

预订belongs_to：表

table_id是保留表中的整数列。

Screenshot of the buttons

Answer 1

我找到了答案。

查看：

<% Table.all.each do |rt| %>
  <label class="btn btn-primary box3" for="reservation_table_id_<%=rt.id%>">
    <%= f.radio_button :table_id, rt.id %>
    <span><%= rt.id %></span>
  </label>
<% end %>

样式：

label > input{
  visibility: hidden;
  position: absolute;
}
label > input + span{
  cursor:pointer;
  border:2px solid transparent;
}