普通html和vue单选框的样式,修改原生单选框样式(vue单选组件)(示例代码)

一、效果如图

5dd878864c3d20252008e67b8e4b8a17.png

二、实现

修改单选样式

//html

//less

@bf: 108rem;

.radio-wrap{

position: absolute;

top:100/@bf;

right:50/@bf;

height: 70/@bf;

width: 70/@bf;

line-height: 50/@bf;

vertical-align: middle;

input[type="radio"] {

width: 55/@bf;

height: 55/@bf;

opacity: 0;

cursor: pointer;

}

label{

position: absolute;

left: 0;

top: 0;

width: .61rem;

height:.6rem;

border-radius: 50%;

border: 1px solid #999999;

}

input:checked+label {

background: #fde117;

border: 1px solid #999999;

}

input:checked+label::after {

position: absolute;

content: "";

width: .13rem;

height: .3rem;

top: .07rem;

left: .2rem;

background: #fde117;

border: 2px solid #333;

border: 1px solid #333;

border-top: none;

border-left: none;

transform: rotate(45deg);

}

}

}

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

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

抵扣说明:

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

余额充值