模拟radio单选按钮

本文介绍了一种使用CSS和HTML中的label标签来模拟原生radio单选按钮的方法,通过隐藏原生radio并用label代替其样式,同时保持radio的功能不变。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.页面制作中设计总是会做出好看的单选样式,但是原生radio又太难改变,又想要原生radio的功能

有时会用div来模拟单选功能,但是自己还是想要原生的radio单选功能

最好用的方法便是用label标签来模拟,label标签可以绑定radio,这样点击label就像点击radio一样完全不影响radio的原生功能

html如下:

  <div class="radio-con">
       <input type="radio" name="sex" value="FEMALE" id="female">
        <label for="female" class="radio-label"></label>
 </div>

  css上:

1.使用opacity: 0;来使radio隐藏

2.虽然看起来隐藏掉了但是位置还是存在的,因此使用的方法是label使用绝对定位脱离文档流,这样就可以假装没有radio的存在,把样式完全写在label上,用js来控制label标签的选中取消状态

css如下:

.radio-con{
   position:relative;
}
.radio-con .radio-label{
    display: inline-block;
    position: absolute;
    top:0;
    left: 0;
//任意样式 }

  

转载于:https://www.cnblogs.com/Anne3/p/7852741.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值