单选/复选框自定义背景和垂直对齐答案

【问题标题】：Radio/Checkbox Custom Background and Vertical-align单选/复选框自定义背景和垂直对齐
【发布时间】：2016-09-16 01:06:23
【问题描述】：

我在使用自定义背景的单选按钮/复选框时遇到问题。我在这里给它们设置了样式：Quick Tip: Easy CSS3 Checkboxes and Radio Buttons。主要部分是输入是标签标签后面，我的主题的其他解决方案建议输入在标签内。

<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> 的中心。我尝试应用垂直对齐，但它没有以整个 <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>

【问题讨论】：

标签： css checkbox radio-button

【解决方案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>

您可能还需要为单选按钮编辑 css。

【讨论】：