选中单<li>选按钮时的样式 - 如何？

Question

我正在尝试设置<li>的样式，无论单选按钮是否被选中。

下面是我想修改的插件代码:

<div class="gift-certificate-show-form">
    <p><?php _e( 'Vem vill du skicka ditt presentkort till?', 'wc_smart_coupons' ); ?></p>
    <ul class="show_hide_list" style="list-style-type: none;">
        <li>
            <input type="radio" id="hide_form" name="is_gift" value="no" checked="checked" />
            <label for="hide_form">
                <?php _e( 'Skicka presentkortet till mig!', 'wc_smart_coupons' ); ?>
            </label>
        </li>
        <li>
            <input type="radio" id="show_form" name="is_gift" value="yes" />
            <label for="show_form">
                <?php _e( 'Till någon annan!', 'wc_smart_coupons' ); ?>
            </label>
        </li>
    </ul>
</div>

我该怎么做呢?

I tried: '

show_hide_list input[type="radio"]:checked + label {
    background: beige !important;

，但这只是文本的背景。我希望整个<li>都高亮显示。由于

Answer 1

这在CSS 4中是可能的，使用:has选择器，就像在jQuery中一样。但是，到目前为止，还没有浏览器实现它，所以您必须使用JavaScript (jQuery将完成这项工作)

下面是一些代码，只需添加一个highlighted CSS类与您的风格:

$(".gift-certificate-show-form :radio").on("click", function() {
    $(this).closest(".gift-certificate-show-form").find("li").removeClass("highlighted");
    $(this).closest("li").addClass("highlighted");
});

---

另一种方法，正如我刚刚注意到的，表单实际上是以选中的单选符开始的:

$(function() {
    var updateHighlight = function() {
        $(".gift-certificate-show-form")
            .find("li")
                .removeClass("highlighted")
            .end()
            .find("li:has(:radio:checked)")
                .addClass("highlighted");
    };
    updateHighlight();
    $(".gift-certificate-show-form :radio").on("click", function() {
        updateHighlight();
    });
});

点击此处:http://jsfiddle.net/LucasTrz/Yc6Qj/1/

别忘了给jQuery添加一个引用

Answer 2

如果你想要一个CSS-only的解决方案，然后尝试使单选按钮块级元素(通过设置display: block;)，并设置它的宽度等于容器(通过设置width: 100%;)和样式它的任何方式你希望基于它是否被选中(通过指定input[type="radio"]:checked选择器的样式规则)