基于单选按钮选择的动态 div 边框
Posted
技术标签:
【中文标题】基于单选按钮选择的动态 div 边框【英文标题】:dynamic div border based on radio button selection 【发布时间】:2016-04-08 20:32:16 【问题描述】:我对这个有困难。我正在尝试更改整个 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;
【问题讨论】:
你需要一些好的 ole JS 呃,我想。这工作得很好,只是在错误的位置。我有一些希望;-) 你可以使用 javascript 或 jquery 来做这个 【参考方案1】:我对高质量的 html 有点固执己见,所以我对你的 HTML 进行了一些整理,以使其在语义上更正确。
你不能使用 CSS 来选择一个元素的“父级”——只能选择它之后的“兄弟”元素——所以你不得不假装它。
.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 边框的主要内容,如果未能解决你的问题,请参考以下文章