Question

我创建了方形而不是圆形的特殊单选按钮。当他们被选中时，我希望边界能够改变。它默认为白色，但我希望它变为黑色。我在使用课程＆＃34; padder＆＃34;。

时难以定位div

HTML

<div class='specialRadio'>
    <div class='padder'><input class='red' type="radio" id="radio1" name="group"/><label class='' for="radio1"></label></div>
    <div class='padder'><input class='blue' type="radio" id="radio2" name="group"/><label class='' for="radio2"></label></div>
    <div class='padder'><input class='yellow' type="radio" id="radio3" name="group"/><label class='' for="radio3"></label></div>
</div>

CSS：

    .specialRadio input[type="radio"]{
        display:none;
    }

    .specialRadio input[type="radio"] + label
    {
        height: 16px;
        width: 16px; 
        display:inline-block;
        padding: 0 0 0 0px;
    }

    .padder{
        display:inline-block;
        padding: 2px;
        margin:2px; 
        border: 1px solid white;
    } 

    .red { background: red;}
    .blue  { background: blue;}
    .yellow  { background: yellow;}

这条线是我遇到问题的地方：

.specialRadio input[type="radio"]:checked>div{  /*select all parent divs where radio button is checked*/
    border:2px solid black;
}

我知道我可以执行以下css代码，但它的目标是标签的边框，而不是父div。

.specialRadio input[type="radio"]:checked  + label{  
    border:2px solid black;
}

Answer 1

你可以使用jQuery：

$(".specialRadio input").change(function() { 
    if ($(this).is(":checked")) { 
        $(this).parent().siblings().css("border", "2px solid white");
        $(this).parent().css("border", "2px solid black"); 
    }
});

Answer 2

一些javascript会帮助你做到这一点。没有css可以完成这项工作。试试这个：

$('.specialRadio input').on('click', function() {
  if($(this).is(':checked') {
    $(this).parent('.padder').css({ borderColor: 'black' })
  } else {
    $(this).parent('.padder').css({ borderColor: 'white' })
  }
});

我还没有对此进行测试，但原则很重要。

选中时，定位单选按钮的父div

2 个答案: