如何使Rails复选框的点击位置与图像关联

3 年 ago
文, 翔
1 minute

想做的事情

sample.gif

实施代码

  <body>
    <%= form_with model: @blog do |f| %>
      <%= f.check_box :タイトル %>
      <%= f.label "タイトル" , class:"ラベル" do %>
        <%= image_tag "minecraft.png" , class:"写真"%>
        <span>文字もいけるよ</span>
      <% end %>
    <% end %>
  </body>

.写真{
  width: 300px;
  cursor: pointer;
  filter: grayscale(100%);
  transition: 0.5s;
}

input:checked + label .写真 ,
input:checked + label span {
  filter: grayscale(0);
  font-weight: bold;
  color: red;
}

解释

暂时只为自己写下了一些内容，等开始理解了之后会继续详细写下去。

bannerAds