CSS 复选框和电台自定义样式

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS 复选框和电台自定义样式相关的知识，希望对你有一定的参考价值。

div {position: relative;}
	
div > input {
	height: 16px;
	width: 16px;
	position: absolute;
	left: 0;
	opacity: 0;
}

div > label { 
	line-height: 16px; 
	padding: 0 0 0 18px;
	font-size:15px;
}

input + label {
	background: url(../img/gr_custom-inputs.png) 0 -1px no-repeat;
	height: 16px;
}

input[type=radio] + label { background-position: 0 -161px; }

/* Checked styles */
input[type=radio]:checked + label { background-position: 0 -241px; }
input[type=checkbox]:checked + label { background-position: 0 -81px; }

/* Disabled styles */
input[type=radio]:disabled + label { background-position: 0 -221px; }
input[type=checkbox]:disabled + label { background-position: 0 -61px; }

/* Disabled and Checked styles */
input[type=radio]:disabled:checked + label { background-position: 0 -301px; }
input[type=checkbox]:disabled:checked + label	{ background-position: 0 -141px; }


<div><input type="radio" value="male" id="male" name="gender" /> <label for="male">Male</label></div>

以上是关于CSS 复选框和电台自定义样式的主要内容，如果未能解决你的问题，请参考以下文章

自定义_单选按钮和复选框_样式

自定义checkbox样式

复选框样式自定义

自定义单选框，复选框样式

求checkbox css样式

element里面的单选框的color怎样修改？默认是蓝色的，使用css修改颜色不管用，大家想一下