css - Rails 5:复选框标签显示两次
问题描述
我为我的应用程序使用自定义复选框样式,我目前面临的问题是呈现自定义复选框样式和正常引导复选框。
正如您可以猜到的那样,自定义复选框不可点击,但会显示出来。
以下是 html 的示例:
<div class="form-group">
<strong class="container_check version_2">Ebay Angebot?
<%= check_box_tag :ebay_offer, true, [] %>
<span class="checkmark"></span>
</strong>
</div>
这是控制台抛出的内容:
<input type="checkbox" name="ebay_offer" id="ebay_offer" value="true" checked="checked">
相应的引导类(不是我的自定义复选标记):
input[type=checkbox], input[type=radio]
我的自定义复选标记类
/** CHECKMARKS */
.container_check {
display: block;
position: relative;
font-size: 14px;
font-size: 0.875rem;
padding-left: 30px;
line-height: 1.3;
margin-bottom: 10px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.container_check input {
position: absolute;
opacity: 0;
cursor: pointer
}
.container_check input:checked~.checkmark {
background-color: #2FE7B1;
border: 1px solid transparent
}
.container_check .checkmark {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
border: 1px solid #d2d8dd;
background-color: #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out
}
.container_check .checkmark:after {
content: "";
position: absolute;
display: none;
left: 7px;
top: 3px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg)
}
.container_check.version_2 {
padding: 6px 0 0 45px;
min-height: 30px
}
.container_check.version_2 .checkmark {
height: 30px;
width: 30px
}
.container_check.version_2 .checkmark:after {
left: 12px;
top: 8px;
width: 5px;
height: 10px
}
.container_check input:checked~.checkmark:after {
display: block
}
解决方案
对于这种事情,跨度通常需要在字段内或标签内。您可以尝试以下格式:
<%= check_box_tag :ebay_offer, true, [] do %>
<span class="checkmark"></span>
<% end %>
或者
<%= label_tag :ebay_offer do %>
<%= check_box_tag :ebay_offer %>
Any desired label text <span class="checkmark"></span>
<% end %>
推荐阅读
- angular - 无法匹配生产环境中的任何路线
- ubuntu-18.04 - 无法在 Ubuntu 18.04 中使用波兰语变音符号
- python - 通过python smtplib发送电子邮件时将href链接添加到图像附件
- ruby - 如何让 Sinatra 正确处理包含数组的 JSON 请求?
- django - Django:搜索视图的 get_queryset 方法以使用多个字段进行过滤
- javascript - pdf js无法加载worker
- javascript - 在 A-Frame 场景中隐藏鼠标指针(小手)
- java - 如何为列表视图中的每个项目定义特定操作
- algorithm - 有约束的匹配算法
- python - 如何在 python 正则表达式中找到字符串的特定部分?