Browse Source

Checkbox like a circle

Volodymyr Tkach 2 years ago
parent
commit
99bb2320f6

+ 1 - 1
css/controls/checkbox/box.css

@@ -2,7 +2,7 @@
 	display: inline-block;
 	height: 20px;
 	vertical-align: middle;
-	width: 35px;
+	width: 20px;
 }
 
 .checkbox-box input[type=checkbox] {

+ 59 - 0
css/controls/checkbox/circle.css

@@ -0,0 +1,59 @@
+.checkbox-circle {
+	display: inline-block;
+	height: 20px;
+	vertical-align: middle;
+	width: 20px;
+}
+
+.checkbox-circle input[type=checkbox] {
+	max-height: 0;
+	max-width: 0;
+	opacity: 0;
+	position: absolute;
+}
+
+.checkbox-circle input[type=checkbox] + label {
+	border-radius: 10px;
+	border: 2px solid #212529;
+	cursor: pointer;
+	display: block;
+	height: 20px;
+	margin-bottom: 0;
+	margin-top: 0;
+	position: relative;
+	text-indent: -5000px;
+	width: 20px;
+}
+
+.checkbox-circle input[type=checkbox] + label:before {
+	background: #212529;
+	border-radius: 24px;
+	content: "";
+	display: block;
+	height: 12px;
+	left: 2px;
+	opacity: 0;
+	position: absolute;
+	top: 2px;
+	transition: .1s ease-in-out;
+	width: 12px;
+}
+
+.checkbox-circle input[type=checkbox]:checked + label {
+	border-color: #212529;
+}
+
+.checkbox-circle input[type=checkbox]:focus + label {
+	box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
+	outline: 0;
+}
+
+.checkbox-circle input[type=checkbox]:hover + label:before {
+	background: #212529;
+	opacity: 0.5;
+}
+
+.checkbox-circle input[type=checkbox]:checked + label:before {
+	background: #212529;
+	opacity: 1;
+}

+ 21 - 0
css/controls/checkbox/example.html

@@ -13,6 +13,7 @@
 		<link rel="stylesheet" href="./box-green.css">
 		<link rel="stylesheet" href="./box-red.css">
 		<link rel="stylesheet" href="./box-white.css">
+		<link rel="stylesheet" href="./circle.css">
 	</head>
 	<body>
 		<div style="padding: 10px; background-color: gray;">
@@ -24,6 +25,10 @@
 				<input type="checkbox" id="lbl_name2" name="name2" />
 				<label for="lbl_name2"></label>
 			</div>
+			<div class="checkbox-circle">
+				<input type="checkbox" id="lbl_name3" name="name3" />
+				<label for="lbl_name3"></label>
+			</div>
 			<br><br>
 			<div class="checkbox-ios blue">
 				<input type="checkbox" id="lbl_name_blue" name="name_blue" />
@@ -33,6 +38,10 @@
 				<input type="checkbox" id="lbl_name_blue2" name="name_blue2" />
 				<label for="lbl_name_blue2"></label>
 			</div>
+			<div class="checkbox-circle blue">
+				<input type="checkbox" id="lbl_name_blue3" name="name_blue3" />
+				<label for="lbl_name_blue3"></label>
+			</div>
 			<br><br>
 			<div class="checkbox-ios green">
 				<input type="checkbox" id="lbl_name_green" name="name_green" />
@@ -42,6 +51,10 @@
 				<input type="checkbox" id="lbl_name_green2" name="name_green2" />
 				<label for="lbl_name_green2"></label>
 			</div>
+			<div class="checkbox-circle green">
+				<input type="checkbox" id="lbl_name_green3" name="name_green3" />
+				<label for="lbl_name_green3"></label>
+			</div>
 			<br><br>
 			<div class="checkbox-ios red">
 				<input type="checkbox" id="lbl_name_red" name="name_red" />
@@ -51,6 +64,10 @@
 				<input type="checkbox" id="lbl_name_red2" name="name_red2" />
 				<label for="lbl_name_red2"></label>
 			</div>
+			<div class="checkbox-circle red">
+				<input type="checkbox" id="lbl_name_red3" name="name_red3" />
+				<label for="lbl_name_red3"></label>
+			</div>
 			<br><br>
 			<div class="checkbox-ios white">
 				<input type="checkbox" id="lbl_name_white" name="name_white" />
@@ -60,6 +77,10 @@
 				<input type="checkbox" id="lbl_name_white2" name="name_white2" />
 				<label for="lbl_name_white2"></label>
 			</div>
+			<div class="checkbox-circle white">
+				<input type="checkbox" id="lbl_name_white3" name="name_white3" />
+				<label for="lbl_name_white3"></label>
+			</div>
 		</div>
 	</body>
 </html>