css美化checkbox样式,置灰样式,超简洁

css美化checkbox样式

效果图

css美化checkbox样式,置灰样式,超简洁_第1张图片样式可以自由定制,不用辛苦写一堆css

html

	<div>
		<input type="checkbox" class="toggle">
		<span>复选框1<span>
	div>
	<div>
		<input type="checkbox" checked class="toggle">
		<span>复选框2<span>
	div>
	<div>
		<input type="checkbox" disabled class="toggle">
		<span>复选框3<span> 
	div>
	<div>
		<input type="checkbox" disabled checked class="toggle">
		<span>复选框4<span>
	div>

css

.toggle{
    text-align: center;
    vertical-align: middle;
    border: none;
    appearance: none;/*关键代码*/
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
}
.toggle::after{
   content: url('../../../../assets/images/checkbox.png');
}

.toggle:checked::after{
    content: url('../../../../assets/images/checkbox1.png');
}
.toggle:disabled{
    content: url('../../../../assets/images/checkboxgray.png');
}
.toggle:checked:disabled{
    content: url('../../../../assets/images/checkbox1gray.png');
}

完整代码如下

	
<html lang="en">
<head>
<meta charset="UTF-8">
<title>美化checkboxtitle>
<style type="text/css">
	body {font-family: '微软雅黑'; background:#eee} 
	.box {width: 600px;border:1px solid #ccc; overflow: hidden; background: #fff; margin: 20px auto;padding: 10px;}

	.toggle{
		text-align: center;
		vertical-align: middle;
		border: none;
		appearance: none;/*关键代码*/
		-webkit-appearance: none;
		outline: none;
		cursor: pointer;
	}
	.toggle::after{
	content: url('./checkbox.png');
	}

	.toggle:checked::after{
		content: url('./checkbox1.png');
	}
	.toggle:disabled{
		content: url('./checkboxgray.png');
	}
	.toggle:checked:disabled{
		content: url('./checkbox1gray.png');
	}
style>
head>
<body>
	<div class="box">
		<div>
			<input type="checkbox" class="toggle"><span>复选框1<span>
		div>
		<div>
			<input type="checkbox" checked class="toggle"><span>复选框2<span>
		div>
		<div>
			<input type="checkbox" disabled class="toggle"><span>复选框3<span> 
		div>
		<div>
			<input type="checkbox" disabled checked class="toggle"><span>复选框4<span>
		div>
	div>
	
body>
html>
其实核心就是找一张图片,遮住原来的checkbox框。还有加上appearance: none,这行代码。找UI或者自己PS一下就行。加油写代码哟

你可能感兴趣的:(css美化checkbox样式,置灰样式,超简洁)