自定义checkbox（对勾）和radio样式
2024-10-04 23:41:52
checkbox:
html:
<div>
<label class="unSelected selected" for="choose">
<checkbox clsss="choose"/>
</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:
<div class="radio" v-for="(ik,iv) in v.answerItem">
<input :id="'radio-'+ik" :name="'radio'+k" type="radio" :value="iv.value" v-model="v.inputAnswer"/>
<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;
}
最新文章
- 每天成长一点---WEB前端学习入门笔记
- Linux学习之CentOS(二十一)--Linux系统启动详解
- DVWA安装，ALMP环境搭建以及php版本转换
- poj 1004:Financial Management（水题，求平均数）
- java 14 -6 BigInteger和BigDecimal
- 用 eric6 与 PyQt5 实现python的极速GUI编程（系列03）---- Drawing（绘图）（1）-- 绘写文字
- Spring MVC SimpleUrlHandlerMapping example
- python3操作socketserver
- 使用async和wait进行异步编程
- valueOf函数详解
- springboot~mongo内嵌集合的操作
- ElasticSearch简要总览
- Django2.0引入css、js、img文件
- 洛谷 P2774 方格取数问题 解题报告
- awk和sed （十二）
- 使用R内置函数操作数据框
- Spark RDD 窄依赖研究
- 《C++ Concurrency in Action》
- 20145104张家明 《Java程序设计》第6周学习总结
- Python Qt5 Creator 使用创建项目教程