转载 

Checkbox和Radio 美化样式

分类:前端    599人阅读    IT小君  2021-07-19 13:14

代码:

<style type="text/css">
body {
	font: 16px/150% microsoft yahei,pingfang sc,Tahoma,Sim sun;
	}
input:disabled + label {/*禁用的指针*/
	cursor: not-allowed
	}
.Radio input,
.Checkbox input {
	display: none
	}
.Radio label,
.Checkbox label {
	padding: 0 16px 0 0;
	display: inline-block;
	cursor: pointer;
	position: relative
	}
.Radio label:before,
.Checkbox label:before {
	box-sizing: border-box;
	content: "";
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1px solid #999;
	margin: 0 8px;
	vertical-align: middle;
	display: inline-block;
	transition: 0.1S;
	}
.Radio label:hover:before,
.Checkbox label:hover:before {
	border-color: #00a4ff;
	}
.Radio input:disabled + label:before,
.Checkbox input:disabled + label:before {
	background-color: #CCC;
	border-color: #999;
	opacity: 0.5;
	}
.Radio input:disabled + label,
.Checkbox input:disabled + label {
	opacity: 0.5;
	}
.Radio input:checked + label:before {
	border: 5px solid #00a4ff;
	}
.Checkbox label:before {
	background: url(images/ico_tick.svg) no-repeat center;
	background-size: 0;
	border-radius: 4px;
	transition: 0.2S;
	}
.Checkbox input:checked + label:before {
	background-color: #00a4ff;
	background-size: 16px;
	border-color: #00a4ff;
	}
.HoverLabel label {
	display: block;
	border-radius: 4px;
	padding: 4px;
	width: 100%;
	}
.HoverLabel label:hover {
	background-color: #EEE;
	}
</style>

效果:


源码下载:https://yy123.ink/frontDetail/71

点击广告,支持我们为你提供更好的服务

小众时尚单品在线电子商务网站模板

canvas炫酷鼠标移动文字粒子特效

HTML5 Canvas竖直流动线条背景动画特效

网页设计开发公司网站模板

js+css3抽奖转盘旋转点餐代码

响应式咖啡饮品宣传网站模板

html5 canvas彩色碎片组合球形旋转动画特效

jQuery右端悬浮带返回顶部特效

响应式时尚单品在线商城网站模板

css鼠标跟随文字模糊特效

css+js实现的颜色渐变数字时钟动画特效

现代时尚家具公司网站模板

中小型创意设计服务公司网站模板

html5 svg夜空中星星流星动画场景特效

html5图标下拉搜索框自动匹配代码

html5 canvas进度条圆环图表统计动画特效

HTML5数字产品服务公司网站模板

响应式太阳能能源公司网站模板

HTML5现代家居装潢公司网站模板

有机水果蔬菜HTML5网站模板

点击广告,支持我们为你提供更好的服务
 工具推荐 更多»
点击广告,支持我们为你提供更好的服务