将漂亮的复选框 css 实现为 rails 表单

【问题标题】：Implement pretty checkbox css into rails form将漂亮的复选框 css 实现为 rails 表单
【发布时间】：2020-09-11 10:39:48
【问题描述】：

我有一些用于复选框的漂亮 CSS（来自这里：https://lokesh-coder.github.io/pretty-checkbox/），我想替换标准复选框

我该怎么做？

表格代码：

<div class="w-64 bg-gray-300 flex justify-between">
  <%= form.label :standard, class: "inline-block" %>
  <%= form.check_box :stretch, class: 'inline-block' %>
</div>

<div class="pretty p-icon p-round p-pulse">
  <input type="checkbox" />
  <div class="state p-success">
  <label>Pretty</label>
    <i class="icon mdi mdi-check"></i>
  </div>
</div>

显示标准和其下的漂亮的屏幕截图：

【问题讨论】：

标签： css ruby-on-rails tailwind-css

【解决方案1】：

我找不到任何关于如何做到这一点的简洁答案。我想做的另一件事是让漂亮的复选框与标准复选框的格式相同，即文本优先，复选框在同一行

我发现这样做的唯一方法是将它们放在桌子上......

<table>
  <tr>
    <th class="bg-blue-100">Thing</th>
    <th><div class="text-white">blankspace</div></th>
    <th>Done?</th>
  </tr>
  <!-- TICK -->
    <td class="bg-blue inline">Stretch</td>
    <td><div class="text-white">blankspace</div></td>
    <td>
      <%= form.label :stretch, :class => 'pretty p-icon p-round p-pulse' do %>
      <%= form.check_box :stretch %>
      <div class="state p-success">
        <label></label>
        <i class="icon mdi mdi-check"></i>
      </div>
      <% end %>
    </td>
  </tr>
...
</table>

【讨论】：