我的单选按钮/复选框与自定义背景有问题。我在这里称呼他们:Quick Tip: Easy CSS3 Checkboxes and Radio Buttons。主要部分是输入是behild标签标签,我的主题的其他解决方案建议输入在标签内。
<li>
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_free_shipping" value="free_shipping" class="shipping_method" checked="checked">
<label for="shipping_method_0_free_shipping">DHL<span> - Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
</label>
</li>
这是标准的Woocommerce结帐运输方式选择。以下是它的外观:JSFiddle
在宽屏设备上看起来很棒,但在手机上标签上有2行,所以我需要在<li>
的中心放置复选框图像。我尝试应用vertical-align,但它并不以整个<li>
元素为中心。也许有人遇到过这个问题?
应该是那样的
ul#shipping_method {
width: 50%;
list-style: none;
margin: 0;
padding: 0;
}
ul#shipping_method li {
border-bottom: 1px solid #d3ced2;
line-height: 2;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
}
ul#shipping_method li input {
display: none;
}
ul#shipping_method li span {
font-weight: normal;
text-transform: none;
font-size: 13px;
}
ul#shipping_method li input + label:before {
border-radius: 100%;
margin-top: -2px;
}
ul#shipping_method li input + label:before {
background-color: #fff;
border: 1px solid #000;
display: inline-block;
width: 20px;
height: 20px;
content: '';
margin-right: 8px;
cursor: pointer;
vertical-align: middle;
}
ul#shipping_method li input:checked + label:before {
background: url(http://s32.postimg.org/9rfrl1wlh/radio_checked.png) -1px;
}
<form>
<ul id="shipping_method">
<li>
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_free_shipping" value="free_shipping" class="shipping_method" checked="checked">
<label for="shipping_method_0_free_shipping">DHL<span> - Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
</label>
</li>
<li>
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate" value="flat_rate" class="shipping_method">
<label for="shipping_method_0_flat_rate">DHL Express - <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
</label>
</li>
</ul>
</form>
答案 0 :(得分:1)
尝试在表格中包含单选按钮和标签作为列元素
<li>
<table>
<tr>
<td><input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_free_shipping" value="free_shipping" class="shipping_method" checked="checked"></td>
<td><label for="shipping_method_0_free_shipping">DHL<span> - Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
</label></td>
</tr>
</table>
</li>
&#13;
此外,您可能需要编辑单选按钮的css。