基于单选按钮选择的动态 div 边框

Question

我在这方面遇到了困难。我正在尝试更改整个 div 周围的边框（例如 #option1），而不仅仅是文本。如您所见，当您单击每个单选按钮时，它会更改选项文本周围的边框，但不会更改整个 div。有什么建议吗？

JSFIDDLE：https://jsfiddle.net/1hdv2n3h/1/

    <div id="wine_club_selection">

<div id="option1">
<p><input type="radio" name="club_type" checked="checked" value="option 1"><br/>
<span class="bold_text">Option 1</span><br/>
3 Bottles<br/>
15% Discount<br/></p></div>

<div id="option2">
<p><input type="radio" name="club_type" value="option 2" ><br />
<span class="bold_text">Option 2</span><br />
6 Bottles<br />
20% Discount<br/>
</p></div>

<div id="option3">
<p><input type="radio" name="club_type" value="option 3"><br>
<span class="bold_text">Option 3</span><br />
12 Bottles<br />
25% Discount<br />
</p></div>

</div>


/*  CSS: */
#wine_club_selection {
    height:200px;
    width:800px;
}

#option1 {
float:left;
width:266px;
}

#option1 p {
    text-align:center;
}

#option2 {
float:left;
width:266px;
}

#option2 p {
    text-align:center;
}

#option3 {
float:right;
width:266px;
text-align: center;
}

#option3 p {
    text-align:center;
}


.bold_text {
    font-weight:800;
}

.billing_table input {
font-size:18px;
color:#620101;
}

#option1 input[type="radio"]:checked ~ *{ 
        border: thin solid #F00;!important;
}

#option2 input[type="radio"]:checked ~ *{ 
        border: thin solid #F00;!important;
}

#option3 input[type="radio"]:checked ~ *{ 
        border: thin solid #F00;!important;
}

Answer 1

我有点 anal-retentive 关于 good-quality HTML，所以我稍微整理了一下你的内容以使其更 semantically-correct。

您不能将 CSS 用于 select 元素的 "parent" -- 只能使用其后的 "sibling" 个元素 -- 因此您必须 sort-of 伪造它。

.options {
  height:200px;
  width:800px;
  text-align:center;
}

.options li{
  display:inline-block;
  width:30%;
}

.options p{
  margin:0;
}

.options header p{
  font-weight:bold;
 }

.options li div{
  padding-top:1em;
}

.options li input{
  position:relative;
  top:2em;
}

.options li input:checked+div{
  border:1px solid #f00;
}

<ul class="options">
  <li>
    <input type="radio" name="option" checked />
    <div>
      <header><p>Option 1</p></header>
      <p>3 bottles</p>
      <p>15% discount</p>
    </div>
  </li>
  <li>
    <input type="radio" name="option" />
    <div>
      <header><p>Option 2</p></header>
      <p>6 bottles</p>
      <p>20% discount</p>
    </div>
  </li>
  <li>
    <input type="radio" name="option" />
    <div>
      <header><p>Option 3</p></header>
      <p>12 bottles</p>
      <p>25% discount</p>
    </div>
  </li>
</ul>

基于单选按钮选择的动态 div 边框

dynamic div border based on radio button selection

css

border

dynamic

button

radio