自定义checkbox（对勾）和radio样式

时间：2019-12-16 12:46:50 阅读：463 评论：0 收藏：0 [点我收藏+]

checkbox:

技术分享图片

html:

<div>

　　</label>

</div>

css:

.unSelected{

　　display: inline-block;

　　width:.2rem;

　　height:.2rem;

　　border-radius:50%;

　　background-color:#ffffff;

　　border: .02rem solid #999999;

}

.selected{

　　border: none;

　　display: inline-block;

　　width:.22rem;

　　height:.22rem;

　　border-radius:50%;

　　background-color:#0375FB;

　　position: relative;

}

.selected:after {

　　content: ‘\00a0‘;

　　display: inline-block;

　　border: .02rem solid #fff;

　　border-top-width: 0;　　

　　border-right-width: 0;

　　width: .1rem;

　　height: .05rem;

　　-webkit-transform: rotate(-50deg);

　　position: absolute;

　　top:.06rem;

　　left:.05rem;

}

radio

html:

　　<label :for="‘radio-‘+ik" class="radio-label">{{iv.label}}</label>

</div>

css:

.radio {

　　margin-bottom: .08rem;

}

.radio label {

　　color: rgba(102, 102, 102, 1);

　　font-size: .16rem;

　　text-align: left;

　　font-family: PingFangSC-regular;

}

.radio input[type="radio"] {

　　position: absolute;

　　opacity: 0;

}

.radio input[type="radio"]+.radio-label:before {

　　content: ‘‘;

　　background: #f4f4f4;

　　border-radius: 100%;

　　border: 1px solid #b4b4b4;

　　display: inline-block;

　　width: 1.2em;

　　height: 1.2em;

　　position: relative;

　　top: .1em;

　　margin-right: .5em;

　　vertical-align: top;

　　cursor: pointer;

　　text-align: center;

　　-webkit-transition: all 250ms ease;

　　transition: all 250ms ease;

}

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

　　background-color: #3197EE;

　　box-shadow: inset 0 0 0 5px #f4f4f4;

}

.radio input[type="radio"]:focus+.radio-label:before {

　　outline: none;

　　border-color: #3197EE;

}

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

　　box-shadow: inset 0 0 0 4px #f4f4f4;

　　border-color: #b4b4b4;

　　background: #b4b4b4;

}

.radio input[type="radio"]+.radio-label:empty:before {

　　margin-right: 0;

}

自定义checkbox（对勾）和radio样式

原文：https://www.cnblogs.com/xingqitian/p/12048336.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)