码迷,mamicode.com
首页 > 其他好文 > 详细

修改原生单选框样式(vue单选组件)

时间:2018-02-03 16:14:56      阅读:1933      评论:0      收藏:0      [点我收藏+]

标签:check   class   inter   type   dex   png   text   index   click   

一、效果如图

技术分享图片

 

 二、实现

修改单选样式

//html
<div class="radio-wrap">
          <input type="radio" v-model="pointer" :value="item" :id="‘selectDoll_‘+index" :disabled="item.money > rechargeMoney">
          <label :for="‘selectDoll_‘+index" @click="judgeMoney(item)"></label>
</div>

//less
<style type="text/css" scoped lang="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);
        }
    }   
}
</style>

 

 

 

  

 

修改原生单选框样式(vue单选组件)

标签:check   class   inter   type   dex   png   text   index   click   

原文地址:https://www.cnblogs.com/leaf930814/p/8408953.html

(1)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!