CSS更改活动选择无线电 [英] CSS change active select for radio
问题描述
我使用以下内容创建切换开关,而不是单选按钮 -
I'm using the following to create a toggle switch instead of radio buttons - it works great
.switch
{
display: block;
float: left;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
font-weight: bold;
text-transform: uppercase;
background: #eee;
border: 1px solid #aaa;
padding: 2px;
box-shadow: inset 0 2px 5px rgba(0,0,0,0.2);
margin-left: 20px;
}
.switch input[type=radio]
{
display: none;
}
.switch label
{
display: block;
float: left;
padding: 3px 6px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
color: #aaa;
cursor: pointer;
}
.switch label:hover
{
text-shadow: 0 0 2px #fff;
color: #888;
}
.switch label.checked
{
background: #8fc800;
color: #eee;
text-shadow: 0 -1px 1px rgba(0,0,0,0.5);
background: -webkit-linear-gradient(top, #8fc800, #438c00);
background: -moz-linear-gradient(top, #8fc800, #438c00);
background: -ms-linear-gradient(top, #8fc800, #438c00);
cursor: default;
}
和html:
<div class="switch">
<input type="radio" name="weekly_new" id="weekSW-0" <?=$yes_checked?> value="Yes" />
<label for="weekSW-0" id="yes">ON</label>
<input type="radio" name="weekly_new" id="weekSW-1" <?=$no_checked?> value="No" />
<label for="weekSW-1" id="no">OFF</label>
</div>
和jquery:
<script>
$(".switch label:not(.checked)").click(function(){
var label = $(this);
var input = $('#' + label.attr('for'));
if (!input.prop('checked')){
label.closest('.switch').find("label").removeClass('checked');
label.addClass('checked');
input.prop('checked', true);
}
});
$(".switch input[checked=checked]").each(function(){
$("label[for=" + $(this).attr('id') + "]").addClass('checked');
});
</script>
正如你可以看到label.checked给出的按钮是'看' - 我想做什么当选择否时,颜色是不同的,而不是是,是,是,是,绿色,是的,开创性的。
As you can see the label.checked gives the button it's 'look' - what I want to do is have a different color for when No is selected as opposed to yes - red for no, green for yes, groundbreaking huh?
无论如何,如果可以完成
Anyway, cannot for the life of me figure out if it can be done
我为标签分配了ID,并尝试了
I assigned IDs to the labels and tried e.g.
.switch label.checked #yes { blah blah }
但这使风格无用!
我已经用这种方式完成了代码,可以这样做吗?
As I've done the code this way, can this be done?
一个小提琴如果更容易fiddle ... obv不得不把valuse checked =检查,因为我通常从mysql表加载,但不能
I've created a fiddle if easier to fiddle with... obv had to put valuse checked=checked as I normally load from mysql table but it cannot
推荐答案
此CSS应与您的代码配合使用:
This CSS should work with your code:
.switch #no.checked {
background:red;
}
Demo
顺便说一句; - )
Cool customization by the way ;-)
这篇关于CSS更改活动选择无线电的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!