使用 jquery mobile 的移动应用程序中 Rails 生成的单选按钮的大小

Question

在一个为移动设备使用 jquery mobile 的 Rails 3.0 应用程序中，我有一系列响应为 0 到 2 的单选按钮。

<%= f.radio_button :field_name, 2 %>
<%= f.radio_button :field_name, 1 %>
<%= f.radio_button :field_name, 0 %>

这些单选按钮太小，无法在移动触摸屏上清晰地看到和使用。我尝试将它们封装在 jquery mobile 的标签中，如下所示：

<div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
        <legend>Enjoy</legend>
        <%= f.radio_button :field_name, 2 %>
        <%= f.label :field_name, "blah" %>
        <%= f.radio_button :field_name, 1 %>
        <%= f.label :field_name, "blah" %>
        <%= f.radio_button :field_name, 0 %>
        <%= f.label :field_name, "blah" %>
    </fieldset>
</div>

它们仍然很小。我可以使用 html 而不是 Rails 来生成按钮，但我宁愿不这样做。是否可以选择增加导轨生产的单选按钮的尺寸？有没有办法操作 Rails 代码来生成 html，从而生成 jquery mobile 格式？还有另一种我没有想到的可能性吗？

谢谢。

顺便说一句，有这个问题，但没有答案，自 2011 年 11 月以来尚未更新。

Answer 1

或者，您可以仅使用“label for”html 来获取 jQuery Mobile 分组按钮“look”（无需额外的 CSS）。只需查看生成的单选按钮的来源并将标签与按钮 ID 相匹配：

    <div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
      <legend>Enjoy</legend>

          <%= f.radio_button :field_name, 0 %>
          <label for="field_name_0">Zero</label>

         <%= f.radio_button :field_name, 1 %>
         <label for="field_name_1">One</label>

          <%= f.radio_button :field_name, 2 %>
          <label for="field_name_2">Two</label>
       </fieldset>
</div>

Answer 2

使用 CSS 设置单选按钮的样式：

.radio_buttons_class {
    height:6em;
    width:6em;
}