input css重写

[name="checkbox"]{
-webkit-appearance: none;
-moz-appearance:none;
appearance: none;
width: 0.2rem;
height: 0.2rem;
margin: 0;
cursor: pointer;
vertical-align: bottom;
background: #fff;
border: 1px solid #E6E6E6;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
outline: none;
vertical-align: middle;
}
[name="checkbox"]:checked{
background: url('../img/xz9879879789.png') no-repeat center;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size:100% ;
background-size: 100%;
}

input[type=radio]:hover{
  border-color: #35C8EA;
}
input[type=radio]:checked{
  outline: none;
}
input[type=radio]:checked::after {
  content: '';
  display: block;
  position: relative;
  top: 5px;
  left: 5px;
  width: 6px;
  height: 6px;
  background: #35C8EA;
  -webkit-border-radius: 1em;
  -moz-border-radius: 1em;
  border-radius: 1em;
}

参考:http://blog.163.com/hks_blog/blog/static/214926090201432445130646/

posted @ 2017-08-01 16:47  lijun8637  阅读(290)  评论(0编辑  收藏  举报