给你的checkbox整容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		input[type="checkbox"]{
			-webkit-appearance: none;
			border: 1px solid #04aae4;
            width: 16px;
            height: 16px;
		}
	   input[type="checkbox"]:checked{
	   	 background-image: url(img/selected.png);
	   	 background-repeat: no-repeat; 
	   }
	</style>
	<body>
	  <input type="checkbox" />
	</body>
</html>

  

-webkit-appearance: none; 去除原生checkbox的样式
input[type="checkbox"]:checked 当checkbox被选中后的样式

欢迎加群 822162679 吹牛皮


posted @ 2018-08-02 17:01  徐伟杰  阅读(130)  评论(0编辑  收藏  举报