首页 > Web开发 > 详细

自定义多选框和单选框css样式

时间:2017-05-27 16:49:11      阅读:318      评论:0      收藏:0      [点我收藏+]

直接上代码:

 

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;
}

 

自定义多选框和单选框css样式

原文:http://www.cnblogs.com/SPHmomo/p/6913490.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!