html单选按钮优化,美化单选按钮radio.html

css3美化单选按钮

/*隐藏input*/

label.bui-radios-label input[type="radio"]{

position: absolute;

opacity: 0;

visibility: hidden;

}

/*自定义radio*/

label.bui-radios-label .bui-radios{

display: inline-block;

position: relative;

width: 13px;

height: 13px;

background-color: #fff;

border: 1px solid #979797;

border-radius: 50%;

vertical-align: -2px;

margin-right: 5px;

}

/*单选框选中后,自定义radio的样式*/

label.bui-radios-label input[type="radio"]:checked + .bui-radios:after{

position: absolute;

content: "";

width: 7px;

height: 7px;

background-color: #fff;

border-radius: 50%;

top: 3px;

left: 3px;

}

label.bui-radios-label input[type="radio"]:checked + .bui-radios{

background-color: #2877FF;

border:1px solid #2877FF;

}

label.bui-radios-label input[type="radio"]:disabled + .bui-radios{

background-color: #e8e8e8;

border:1px solid #979797;

}

label.bui-radios-label input[type="radio"]:disabled:checked + .bui-radios:after{

background-color: #c1c1c1;

}

/*自定义radio的过渡效果*/

label.bui-radios-label.bui-radios-anim .bui-radios{

-webkit-transition:background-color ease-out .5s;

transition:background-color ease-out .5s;

}

有简单的背景动画:

开启

关闭

无背景动画:

禁用状态(disabled):

一键复制

编辑

Web IDE

原始数据

按行查看

历史

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值