radio单选样式-类似手机选项

最新推荐文章于 2022-09-30 15:15:49 发布

多_喝_水

最新推荐文章于 2022-09-30 15:15:49 发布

阅读量870

点赞数

分类专栏：学习总结文章标签：单选样式 radio label

本文链接：https://blog.csdn.net/deideidei13/article/details/88085887

版权

学习总结专栏收录该内容

13 篇文章

订阅专栏

HMTL

用labei连接单选选项，设置单选框隐藏

航班类型 
    <label for="one">单程</label>
    <input type="radio" name="radio" value="one" checked="checked" id="one"/>  
    <label for="two">往返</label>
    <input type="radio" name="radio" value="two" checked="checked" id="two"/>

CSS

.ticket-panle .panle-left form .xuanxiang label{display: inline-block; width: 56px;height: 32px;line-height:32px; border-radius: 3px;font-size: 16px; text-align: center;} 
.ticket-panle .panle-left form .xuanxiang label[for=one]{background:#458b00;color: #fff; margin-left: 8px;}
.ticket-panle .panle-left form .xuanxiang input{opacity: 0;position: absolute;}

控制选中其中一个，两个样式同时变化

$(".ticket-panle .panle-left form .xuanxiang label[for=two]").click(function(){
    $(this).css({"background-color":"#458b00","color":"#fff"});
    $(".ticket-panle .panle-left form .xuanxiang label[for=one]").css({"background-color":"transparent","color":"#666"});
});
	
$(".ticket-panle .panle-left form .xuanxiang label[for=one]").click(function(){
    $(this).css({"background-color":"#458b00","color":"#fff"});
    $(".ticket-panle .panle-left form .xuanxiang label[for=two]").css({"background-color":"transparent","color":"#666"});
});

去掉背景色：background-color:transparent;