We use cookies to ensure you get the best experience on our website
Home Explore Help
Sign In
mirror
/
assets
mirror of https://github.com/vladimirok5959/assets.git
2
0
Fork 0
Files Wiki
Browse Source

Checkbox like a box

Volodymyr Tkach 2 years ago
parent
5da255d126
commit
d4daf02c83
2 changed files with 134 additions and 0 deletions
Split View Show Diff Stats
  1. 113 0
      css/controls/checkbox/box.css
  2. 21 0
      css/controls/checkbox/example.html

+ 113 - 0
css/controls/checkbox/box.css
View File 

@@ -0,0 +1,113 @@
 
+.checkbox-box {
 
+	display: inline-block;
 
+	height: 20px;
 
+	vertical-align: middle;
 
+	width: 35px;
 
+}
 
+
 
+.checkbox-box input[type=checkbox] {
 
+	max-height: 0;
 
+	max-width: 0;
 
+	opacity: 0;
 
+	position: absolute;
 
+}
 
+
 
+.checkbox-box input[type=checkbox] + label {
 
+	border-radius: 4px;
 
+	border: 2px solid #212529;
 
+	cursor: pointer;
 
+	display: block;
 
+	height: 20px;
 
+	margin-bottom: 0;
 
+	margin-top: 0;
 
+	position: relative;
 
+	text-indent: -5000px;
 
+	width: 20px;
 
+}
 
+
 
+.checkbox-box input[type=checkbox] + label:before {
 
+	border-color: #212529;
 
+	border-style: solid;
 
+	border-width: 0px 0px 2px 2px;
 
+	content: "";
 
+	display: block;
 
+	height: 5px;
 
+	left: 8px;
 
+	opacity: 0;
 
+	position: absolute;
 
+	top: 7px;
 
+	transform: translate3d(-50%, -50%, 0px) rotate(-45deg);
 
+	transition: .1s ease-in-out;
 
+	width: 7px;
 
+}
 
+
 
+.checkbox-box input[type=checkbox]:checked + label {
 
+	border-color: #212529;
 
+}
 
+
 
+.checkbox-box input[type=checkbox]:focus + label {
 
+	box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
 
+	outline: 0;
 
+}
 
+
 
+.checkbox-box input[type=checkbox]:hover + label:before {
 
+	border-color: #212529;
 
+	opacity: 0.5;
 
+}
 
+
 
+.checkbox-box input[type=checkbox]:checked + label:before {
 
+	border-color: #212529;
 
+	opacity: 1;
 
+}
 
+
 
+/* Blue */
 
+.checkbox-box.blue input[type=checkbox]:checked + label {
 
+	border-color: #007bff;
 
+}
 
+
 
+.checkbox-box.blue input[type=checkbox]:focus + label {
 
+	box-shadow: 0 0 0 0.25rem rgb(49 132 253 / 50%);
 
+}
 
+
 
+.checkbox-box.blue input[type=checkbox]:checked + label:before {
 
+	border-color: #007bff;
 
+}
 
+
 
+/* Green */
 
+.checkbox-box.green input[type=checkbox]:checked + label {
 
+	border-color: #28a745;
 
+}
 
+
 
+.checkbox-box.green input[type=checkbox]:focus + label {
 
+	box-shadow: 0 0 0 0.25rem rgb(60 153 110 / 50%);
 
+}
 
+
 
+.checkbox-box.green input[type=checkbox]:checked + label:before {
 
+	border-color: #28a745;
 
+}
 
+
 
+/* Red */
 
+.checkbox-box.red input[type=checkbox]:checked + label {
 
+	border-color: #dc3545;
 
+}
 
+
 
+.checkbox-box.red input[type=checkbox]:focus + label {
 
+	box-shadow: 0 0 0 0.25rem rgb(225 83 97 / 50%);
 
+}
 
+
 
+.checkbox-box.red input[type=checkbox]:checked + label:before {
 
+	border-color: #dc3545;
 
+}
 
+
 
+/* White */
 
+.checkbox-box.white input[type=checkbox]:checked + label {
 
+	border-color: #fff;
 
+}
 
+
 
+.checkbox-box.white input[type=checkbox]:focus + label {
 
+	box-shadow: 0 0 0 0.25rem rgb(211 212 213 / 50%);
 
+}
 
+
 
+.checkbox-box.white input[type=checkbox]:checked + label:before {
 
+	border-color: #fff;
 
+}

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

@@ -4,6 +4,7 @@
 
 		<meta charset="utf-8" />
 
 		<link rel="stylesheet" href="./../../reset.css">
 
 		<link rel="stylesheet" href="./ios.css">
 
+		<link rel="stylesheet" href="./box.css">
 
 	</head>
 
 	<body>
 
 		<div style="padding: 10px; background-color: gray;">
 
@@ -11,26 +12,46 @@
 
 				<input type="checkbox" id="lbl_name" name="name" />
 
 				<label for="lbl_name"></label>
 
 			</div>
 
+			<div class="checkbox-box">
 
+				<input type="checkbox" id="lbl_name2" name="name2" />
 
+				<label for="lbl_name2"></label>
 
+			</div>
 
 			<br><br>
 
 			<div class="checkbox-ios blue">
 
 				<input type="checkbox" id="lbl_name_blue" name="name_blue" />
 
 				<label for="lbl_name_blue"></label>
 
 			</div>
 
+			<div class="checkbox-box blue">
 
+				<input type="checkbox" id="lbl_name_blue2" name="name_blue2" />
 
+				<label for="lbl_name_blue2"></label>
 
+			</div>
 
 			<br><br>
 
 			<div class="checkbox-ios green">
 
 				<input type="checkbox" id="lbl_name_green" name="name_green" />
 
 				<label for="lbl_name_green"></label>
 
 			</div>
 
+			<div class="checkbox-box green">
 
+				<input type="checkbox" id="lbl_name_green2" name="name_green2" />
 
+				<label for="lbl_name_green2"></label>
 
+			</div>
 
 			<br><br>
 
 			<div class="checkbox-ios red">
 
 				<input type="checkbox" id="lbl_name_red" name="name_red" />
 
 				<label for="lbl_name_red"></label>
 
 			</div>
 
+			<div class="checkbox-box red">
 
+				<input type="checkbox" id="lbl_name_red2" name="name_red2" />
 
+				<label for="lbl_name_red2"></label>
 
+			</div>
 
 			<br><br>
 
 			<div class="checkbox-ios white">
 
 				<input type="checkbox" id="lbl_name_white" name="name_white" />
 
 				<label for="lbl_name_white"></label>
 
 			</div>
 
+			<div class="checkbox-box white">
 
+				<input type="checkbox" id="lbl_name_white2" name="name_white2" />
 
+				<label for="lbl_name_white2"></label>
 
+			</div>
 
 		</div>
 
 	</body>
 
 </html>