css自定义checkbox勾选样式代码-html代码-BFW代码库

css自定义checkbox勾选样式代码

代码语言：html

代码描述：css自定义checkbox勾选样式代码，勾选框可以是图片或svg。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');

body {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Inter', sans-serif;
}

.container {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
}

.checkbox {
	position: relative;
	overflow: hidden;
}

.checkbox input {
	position: absolute;
	left: -100%;
}

.checkbox label svg {
	display: none;
}
.checkbox label img {
	display: none;
}
.checkbox input:checked ~ label img {
	display: block
}
.checkbox input:checked ~ label svg {
	display: block
}

.checkbox label {
	display: flex;
	gap: 8px;
	align-items: center;
}

.hack-checkbox {
	height: 28px;
	width: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	border: 1px solid gray;
	color: green;
}
</style>


  
  
</head>

<body translate="no">
  <div class="container">
	<div class="checkbox">
	<input type="checkbox" id="item-one">
	<label for="item-one">
		<span class="hack-checkbox">
			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M216,72H180.92c.39-.33.79-.65,1.17-1A29.53,29.53,0,0,0,192,49.57,32.62,32.62,0,0,0,158.44,16,29.53,29.53,0,0,0,137,25.91a54.94,54.94,0,0,0-9,14.48,54.94,54.94,0,0,0-9-14.48A29.53,29.53,0,0,0,97.56,16,32.62,32.62,0,0,0,64,49.57,29.53,29.53,0,0,0,73.91,71c.38.33.78.65,1.17,1H40A16,16,0,0,0,24,88v32a16,16,0,0,0,16,16v64a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V136a16,16,0,0,0,16-16V88A16,16,0,0,0,216,72ZM149,36.51a13.69,13.69,0,0,1,10-4.5h.49A16.62,16.62,0,0,1,176,49.08a13.69,13.69,0,0,1-4.5,10c-9.49,8.4-25.24,11.36-35,12.4C137.7,60.89,141,45.5,149,36.51Zm-64.09.36A16.63,16.63,0,0,1,96.59,32h.49a13.69,13.69,0,0,1,10,4.5c8.39,9.48,11.35,25.2,12.3.........完整代码请登录后点击上方下载按钮下载查看