html代码
css代码
/*自定义多选框*/
.checkbox input[type="checkbox"] {
-webkit-appearance: none;
outline: none;
}
.checkbox input[type="checkbox"] {
display: none;
}
.checkbox input[type="checkbox"]+label {
display: flex;
cursor: pointer;
color: #888888;
padding: 2px 2px;
line-height: 16Px;
background: #FFFFFF;
}
.checkbox label::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background: #ffffff;
vertical-align: middle;
margin-right: 8px;
border: 1px solid #C6CACF;
border-radius: 4px;
border-image: initial;
-webkit-box-sizing: border-box;
}
.checkbox input[type="checkbox"][disabled='disabled']+label::before {
position: relative;
width: 16px;
height: 16px;
border-color: #E4E9EE;
color: #BBBBBB;
}
.checkbox input[type="checkbox"]:checked+label::before {
position: relative;
width: 16px;
height: 16px;
border-color: #4FB1F7;
background-color: RGB(79, 177, 247);
/*background-image: url(../static/images/gou.png);*/
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo1YWUxNTk4My1jZjg4LTBjNDAtOGViZC03NjcxNWVjM2I4OWQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTI2QzNDN0M2QUVBMTFFODg3NDVENDZENzFFQzZDNUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTI2QzNDN0I2QUVBMTFFODg3NDVENDZENzFFQzZDNUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQ2N2Y3N2E5LTEyZDUtM2I0YS1hZTIwLTZlNDg0ZTExNWUyMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1YWUxNTk4My1jZjg4LTBjNDAtOGViZC03NjcxNWVjM2I4OWQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz62q2/sAAAAc0lEQVR42mL8//8/AyWAiYFCMMIMYATiqUD8EkUUFAtEYEYgnv4fAqYhy6ErnAjEDng0T4fycRpwC4i/AbETFs1L0TVjM0AGiO9ADXFG08yMzXvY/CsPxE+A+B8hzbgMAGEVIH4ExIvwaQZhxtG8wAAQYAD+Tjm52jzA+gAAAABJRU5ErkJggg==);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.checkbox input[type="checkbox"][disabled='disabled']+label,
.checkbox input[type="checkbox"][disabled='disabled']:checked+label {
color: #BBBBBB
}
.checkbox input[type="checkbox"][disabled='disabled']:checked+label::before {
position: relative;
width: 16px;
height: 16px;
border-color: #E4E9EE;
background-color: #dce0e4;
/*background-image: url(../static/images/gou.png);*/
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo1YWUxNTk4My1jZjg4LTBjNDAtOGViZC03NjcxNWVjM2I4OWQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTI2QzNDN0M2QUVBMTFFODg3NDVENDZENzFFQzZDNUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTI2QzNDN0I2QUVBMTFFODg3NDVENDZENzFFQzZDNUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQ2N2Y3N2E5LTEyZDUtM2I0YS1hZTIwLTZlNDg0ZTExNWUyMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1YWUxNTk4My1jZjg4LTBjNDAtOGViZC03NjcxNWVjM2I4OWQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz62q2/sAAAAc0lEQVR42mL8//8/AyWAiYFCMMIMYATiqUD8EkUUFAtEYEYgnv4fAqYhy6ErnAjEDng0T4fycRpwC4i/AbETFs1L0TVjM0AGiO9ADXFG08yMzXvY/CsPxE+A+B8hzbgMAGEVIH4ExIvwaQZhxtG8wAAQYAD+Tjm52jzA+gAAAABJRU5ErkJggg==);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.checkbox {
display: inline-block;
vertical-align: middle;
}
自定义单选框
/*自定义单选框*/
.radio input[type="radio"] {
-webkit-appearance: none;
outline: none;
}
.radio input[type="radio"] {
display: none;
}
.radio input[type="radio"]+label {
cursor: pointer;
color: #888888;
padding: 2px 2px;
line-height: 16Px;
background: #FFFFFF;
vertical-align: bottom;
}
.radio label::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background: #ffffff;
vertical-align: middle;
margin-right: 8px;
border: 1px solid #C6CACF;
border-radius: 50%;
-webkit-box-sizing: border-box;
}
.radio input[type="radio"][disabled='disabled']+label::before {
position: relative;
width: 16px;
height: 16px;
border-color: #E4E9EE;
color: #BBBBBB;
}
.radio input[type="radio"]:checked+label::before {
position: relative;
width: 16px;
height: 16px;
border: 1px solid #4FB1F7;
background: #FFFFFF;
background-color: RGB(79, 177, 247);
/*background-image: url(../static/images/dian.png);*/
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDphYWU1OWM5Yy0yMjBhLTE2NDctOTgwNC0yZTYzNjA4MTIyNzkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OURBNUNCRjg2RkFFMTFFODgzOEZCQTM4Q0Q3RENFOUIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OURBNUNCRjc2RkFFMTFFODgzOEZCQTM4Q0Q3RENFOUIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOmQ3NjBjMGU0LTk0MDUtNDA0My05YmJiLWE2YTY4YjBmMTAyNiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDphYWU1OWM5Yy0yMjBhLTE2NDctOTgwNC0yZTYzNjA4MTIyNzkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4dXjZIAAABQUlEQVR42mL03/idAQ1oAXEKEHsCsSJU7B4Q7wDiOUB8DVkxExKbDYinAPFlIC4EYg0gZodiTagYSG4GEHPCNLEgad4KxC4M+AHIwnQgVoW68BfMBf1EaEYGTkDcBzNRG2oqqSADpJcFGmDMyDIsQGMTtFgZHGSADEYGhgOP/zEsuPab4c8/FANAelJABnigGx0P1OyjhDATxP717z/Domt/0JV6gLyghC7qKMOE4V43OWZs3lBiYqAMgGPhHrro/if/MFTufvQXmwEPWaApTANZdCEwwIBhx+AgC3EgKBCX3viDzYA9jMCkrANkXECPCSIAyEkGICuuAPFMMvwP0nMFFoigdL6HBM37oHrgmekXEHsD8VQg/odH4z+ozT5QPSi5ESSQA8R6QDwRiG8C8W8g/grEV6Fi+tAkDC8DAAIMAOLFSYeL0fRpAAAAAElFTkSuQmCC);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.radio input[type="radio"][disabled='disabled']+label,
.radio input[type="radio"][disabled='disabled']:checked+label {
color: #BBBBBB;
border: none;
}
.radio input[type="radio"][disabled='disabled']:checked+label::before {
position: relative;
width: 16px;
height: 16px;
border: none;
background: #FFFFFF;
/*background-image: url(../static/images/diandis.png);*/
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDphYWU1OWM5Yy0yMjBhLTE2NDctOTgwNC0yZTYzNjA4MTIyNzkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RTFBQUU4N0M2RkIxMTFFOEE4OUJENUVDMjIxMTBFOUMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RTFBQUU4N0I2RkIxMTFFOEE4OUJENUVDMjIxMTBFOUMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjA1MTM1ZjM4LTliMTUtNzE0Yy1iYTNiLTQxODQzNGFhMmRiYSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDphYWU1OWM5Yy0yMjBhLTE2NDctOTgwNC0yZTYzNjA4MTIyNzkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5+VrY7AAABLElEQVR42mK8c/8JAxrQAuIUIPYEYkWo2D0g3gHEc4D4GrJiRiQD2IC4D4gzgZiJATv4B8SzgbgQiL+DBFiQNG8FYhcG/ABkcDoQq0Jd+AtmUz8RmpGBE9S1YC9oA+mLQMzMQBr4C8T6LNAAQ9HMyMjIICzIx8DLwwXmf/7yjeHt+08M////R1YG0pMCMsAD3WiQZn4+HjgfxAZpBhmCBjxAYaCELgqzGRnw8XJj84YSEwNlABwL99BFQX5GB58+f8NmwEMmaApDASC/fvz0heHfv39gDGK/+/AJmwF7QNGoA2RcIDMaDUAuuALEM8nwP0jPFVgggtL2HhI074PqgWeaX0DsDcRToRmGAU9mAtnsA9WDkhthAJS0U6EJTAmq8AHUhXOgXoYDgAADAJw/WlENaiPkAAAAAElFTkSuQmCC);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.radio {
display: inline-block;
vertical-align: middle;
}