CSS3特效-自定义radio

自定义checkbox样式

• 效果图:
  
• 代码

// css
.radio {
	display: none;
}
.radio+label {
	display: inline-block;
	position: relative;
}

.radio+label {
	padding-left: 20px;
	box-sizing: border-box;
}
.radio+label:before{
	content: "";
	width: 14px;
	height: 14px;
	display: inline-block;
	position: absolute;
	transform: translateY(-50%);
	top: 50%;
	right: 0px;
}
.radio+label:before {
	width: 18px;
	height: 18px;
	left: 0px;
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="7" cy="9" r="7" transform="translate(1 -1)" fill="#FFF" stroke="#D9DBD9"></circle></svg>');
}

.radio[type=radio]:checked+label:before {
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><g transform="translate(2 2)" fill="none"><circle stroke="#C0E6FF" stroke-width="2" fill="#09F" cx="7" cy="7" r="8"></circle><circle fill="#FFF" cx="7" cy="7" r="2"></circle></g></svg>');
}

//使用
<h2>radio</h2>
   <div>
       <input id="label1" class="radio" type="radio" name="sex" checked>
       <label for="label1">男</label>
       <input id="label2" class="radio" type="radio" name="sex">
       <label for="label2">女</label>
   </div>