自定义多选框(checkbox)和单选框(radio)css样式

2018-06-24 01:24:30来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

直接上代码:

 

input[type="radio"],input[type="checkbox"]{
  -webkit-appearance: none;
  outline: none;
}
input[type="radio"]{
  position: relative;
  width: .12rem;
  height: .12rem;
  border: 1px solid #186D9A;
  border-radius: .06rem;
  -webkit-border-radius: .06rem;
  -moz-border-radius:.06rem;
  vertical-align: middle;
  background: white;
}

input[type="radio"]:checked:after {
  content: '';
  position: absolute;
  left: .02rem;
  top: .02rem;
  width: .06rem;
  height: .06rem;
  background-color: #186D9A;
  border-radius: .03rem;
  -webkit-border-radius: .03rem;
  -moz-border-radius:.03rem;
}
input[type="radio"]:checked {
  background-color: #fff;
}
input[type="checkbox"] {
  position: relative;
  width: .12rem;
  height: .12rem;
  border: .01rem solid #186D9A;
  border-radius: .02rem;
  vertical-align: middle;
  background: white;
  margin-top: 0;
}
input[type="checkbox"]:checked:after {
  content: '';
  position: absolute;
  left: .02rem;
  top: .02rem;
  width: .07rem;
  height: .04rem;
  border-left: .02rem solid #186D9A;
  border-bottom: .02rem solid #186D9A;
  transform: rotate(-45deg);
}
input[type="checkbox"]:checked {
  background-color: #fff;
}

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:CSS边框(圆角、阴影、背景图片)

下一篇:bootstrap前端框架使用总结分享