gpt4 book ai didi

html - 单选按钮上的图像不起作用

转载 作者:太空宇宙 更新时间:2023-11-04 14:11:39 26 4
gpt4 key购买 nike

我正在为radio buttons 使用image,但它不工作。请帮帮我。

这是我的 Html

<div class="redio-box"> 
<input name="sms_notification" class="radio" type="radio" value="1" checked>
<label for="subscribe">
<span></span>
Subscribe
</label>
<input name="sms_notification" class="radio" type="radio" value="0" >
<label for="unsubscribe">
<span></span>
Unsubscribe
</label>
</div>

这是我的 Css

.redio-box .radio {
display:none; *display:inline; background:none; width:auto;
}
.redio-box .radio + label { display:inline; font-size:12px; color:#C3B496; }
.redio-box .radio + label span {
display:inline-block; *display:none;
width:10px;
height:10px;
margin:-2px 2px 0 4px;
vertical-align:middle;
background:url(../../images/check_radio_sheet.png) -30px top no-repeat;
cursor:pointer;
}
.redio-box .radio:checked + label span {
background:url(../../images/check_radio_sheet.png) -45px top no-repeat;
}

这里是 image

最佳答案

这里有一个fiddles的列表,照着做就行了,很容易理解和实现。

FIDDLE1

FIDDLE2

FIDDLE3

Very Good Fiddle

JSBIN

HTML:

<body>    
<label class="fb" for="fb1">
<input id="fb1" type="radio" name="fb" value="small" />
<img src="http://placehold.it/20x20/35d/fff&text=f">
</label>

<label class="fb" for="fb2">
<input id="fb2" type="radio" name="fb" value="big"/>
<img src="http://placehold.it/40x60/35d/fff&text=f">
</label>

<label class="fb" for="fb3">
<input id="fb3" type="radio" name="fb" value="med" />
<img src="http://placehold.it/40x40/35d/fff&text=f">
</label>

<label class="fb" for="fb4">
<input id="fb4" type="radio" name="fb" value="long" />
<img src="http://placehold.it/60x15/35d/fff&text=f">
</label>
</body>

CSS:

.fb > input[type=radio]{
display:none;
}
input[type=radio] + img{
cursor:pointer;
border:2px solid transparent;
}
input[type=radio]:checked + img{
border:2px solid #f00;
}

关于html - 单选按钮上的图像不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20699315/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com