自定义CheckBox和radio

最新推荐文章于 2022-06-09 15:06:15 发布

hangGe0111

最新推荐文章于 2022-06-09 15:06:15 发布

阅读量1.2w

点赞数

分类专栏： html 文章标签： CheckBox改变样式 radio改变样式

本文链接：https://blog.csdn.net/hangGe0111/article/details/85337415

版权

1.CheckBox和radio不能改变样式，但点击label标签可以点选CheckBox和radio，所以可以通过这个方法来改变；

2.代码和展示

2.1html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--<link rel="stylesheet" type="text/css" href="css/2.css"/>-->
		<style type="text/css">
			*{
			    margin: 0;
			    padding: 0;
			}
			
			.clearfix:before, .clearfix:after {
			    content: '.';
			    display: block;
			    visibility: hidden;
			    font-size: 0;
			    line-height: 0;
			    width: 0;
			    height: 0;
			}
			.clearfix:after {
			  clear: both;
			}
			.clearfix {
			  zoom: 1;
			}
			/**
			 *  checkbox   
			 * **/
			.labelAll{
			    position: relative;   
			    cursor: pointer; 
			    float: left;
			}
			.labelAll  .labelAll-checkbox-span{
			    width: 50px;
			    height: 50px;
			    background-image: url(data:image/png;base64,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);
			    background-size:50px 50px;
			    background-repeat: no-repeat;
			    float: left;
			}
			
			.labelAll .labelAll-checkbox{
			    display: none;
			    float: inherit;
			}
			
			.labelAll  .labelAll-checkbox-em{
			    font-style: normal;
			    float: left;
			    margin-top: 25px;
			    margin-left: 10px;
			}
			
			.labelAll-checkbox:checked+span{
			    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADIEAYAAAD9yHLdAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAADtBJREFUeNrt3W10VdWZwPFn35t7Y4FMlwJlRkmC0MHECExFoR1QEyc62FIWBUVetFXLCqxaX2oVpMU1FlCQqmARRJcaLJhRcFEK2oYXBbuQUUAKBUzCW8kNhWBQWqJAcpO750O8kSbEJCf3nH3Ouf/fN1gh+9n5wH/tc+45EQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADMUKYHsNtGLSKSktJj+iVvhKsuvTQ4Ivg3tTYjQ/4cG6L/lJamrwv8QApDIdNzAka997UbaqPFxVkTy14Wqa42PQ68wTcBKVucqcMFWVmxSTHRz48dq3apzmpOfr6k6y2y7OqrpUqNkP3hsOk5AVfaHFgjc7OysiYeHlB7f1mZ6XHgDSmmB2gvrUVElCq7OL0qXDR8uPxRZUr51Kn6Ap0p/zNkiCpTopaIyAXSTUREqtQI0zMDgB95JiBlnS7ZHZrfv3/ZruBgdWbRItkoA+WOIUNEvggFAMBRrg1I40ljW3o0XHXvvbqP7JXcuXOlSrpxKQoAzHNdQPbefPlykXB436DqneGrCgtlqeojl4wfL1WmJwMAnCtgeoC47dsGXikSCgVLqweGVq1cqZeqZfKX8eNNzwUAOD/jJ5DGS1U1H08JX1tYKG+oPBnzve+ZngsA8NWMn0D2fTP9D+H9990nh9UUeX/CBNPzAADaxlhAPhqVvjn0WU6O3ioXy8gnnjD9gwAAtI+xgAQD6qj6w8KFPOAHAN7k+D2Q0kjPn6X2HDZMn5YH9W3XXWf6BwAAsMbxE4i6VnWO5U6danrjAICOcSwgZVdnpqa+e+mler7apFZx8gAAr3MsILHnYs/p58aOlSyJSK3yzUscASBZORYQVSX99UX5+aY3DABIDNsDEn9QUE1RS1T54MGmNwwATivZnv5yeOy0aWWHeq0MPTBggOl5EsX2gBxcdfEvL9jds6deIatlfefOpjcMAE4pfTH9iVDljBmqi3pUVj7+uEyO3a8CGzeWvpj+RMqJq64yPV9H2R6Q6JHQ53XLe/Y0vVEAcErp8fSRoQMzZ8pQtVBlPPJI/O/1b0TkNxdeKGPUR4

最低0.47元/天解锁文章

hangGe0111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义CheckBox和radio

1.CheckBox和radio不能改变样式，但点击label标签可以点选CheckBox和radio，所以可以通过这个方法来改变；2.代码和展示2.1html&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt;
复制链接

扫一扫