自定义checkbox(对勾)和radio样式

Posted xingqitian

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了自定义checkbox(对勾)和radio样式相关的知识,希望对你有一定的参考价值。

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: ‘0a0‘;
  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;
}
 

以上是关于自定义checkbox(对勾)和radio样式的主要内容,如果未能解决你的问题,请参考以下文章

[ HTML5 表单样式 checkbox | radio ] 自定义checkbox 与radio样式实现思路

自定义radio/checkbox样式

自定义样式的checkbox, radio

自定义checkbox, radio样式总结

小程序: 自定义 -- 单选radio多选checkbox的样式

关于自定义checkbox-radio标签的样式的方法(label 和 background-position理解)