自定义修改input=radio的样式(选中+禁用)

自定义修改input=radio的样式

前言

鉴于在移动端开发中用到的移动端的组件库内没有符合UI设计要求的radio样式,只能使用最原始的input来造成符合需求的框

实现

样式与原始的差不多,只是选中的颜色改成绿色

		<input
        id="inputChoice1"
         v-model="advice"
         class="select"
         type="radio"
         :disabled="!isLeader"
         name="leaderadvice"
         value="choice1"
       />
       <label for="inputChoice1"></label>
       <span>choice1</span>
       <input
         id="inputChoice2"
         v-model="advice"
         class="select"
         type="radio"
         :disabled="!isLeader"
         name="leaderadvice"
         value="choice2"
       />
       <label for="inputChoice2"></label>
       <span>choice2</span>

选中时:
在这里插入图片描述
禁用时
在这里插入图片描述
样式的修改主要还是借助各种选择期,以及将选中框的样式寄托在label上

样式代码如下

//将input的圆框隐藏
 input[type='radio'] {
    width: 0.32rem;
    height: 0.32rem;
    display: none;
  }
//定位label到圆框的位置,并修改样式为圆框
  label {
    position: relative;
    top: 0.1rem;
    width: 0.32rem;
    height: 0.32rem;
    border-radius: 50%;
    border: 1px solid #999;//默认为边框
  }

  /*设置选中的radio的样式*/
  /* + 是兄弟选择器,获取选中后的label元素*/
  input:checked + label {
    background: url('../../../assets/images/mobile/icon-check.png'); //直接借助背景图片
    border: none;
  }
   /*设置禁用的radio的样式*/
  input:checked[disabled] + label {
    background: url('../../../assets/images/mobile/icon-check-disabled.png');
    border: none;
  }
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值