0

Bootstrap 4 Custom Controls

<div class="container">

	<div class="custom-controls-stacked d-block my-3">
		<label class="custom-control custom-checkbox">
			<input type="checkbox" class="custom-control-input">
			<span class="custom-control-indicator"></span>
			<span class="custom-control-description">Custom checkbox</span>
		</label>
	</div>

	<div class="custom-controls-stacked d-block my-3">
		<label class="custom-control material-checkbox">
			<input type="checkbox" class="material-control-input">
			<span class="material-control-indicator"></span>
			<span class="material-control-description">Material checkbox</span>
		</label>
		<label class="custom-control fill-checkbox">
			<input type="checkbox" class="fill-control-input">
			<span class="fill-control-indicator"></span>
			<span class="fill-control-description">Fill checkbox</span>
		</label>
		<label class="custom-control overflow-checkbox">
			<input type="checkbox" class="overflow-control-input">
			<span class="overflow-control-indicator"></span>
			<span class="overflow-control-description">Overflow checkbox</span>
		</label>
	</div>

	<div class="custom-controls-stacked d-block my-3">
		<label class="custom-control material-switch">
			<span class="material-switch-control-description">Off</span>
			<input type="checkbox" class="material-switch-control-input">
			<span class="material-switch-control-indicator"></span>
			<span class="material-switch-control-description">On</span>
		</label>
		<label class="custom-control ios-switch">
			<span class="ios-switch-control-description">Off</span>
			<input type="checkbox" class="ios-switch-control-input">
			<span class="ios-switch-control-indicator"></span>
			<span class="ios-switch-control-description">On</span>
		</label>
		<label class="custom-control border-switch">
			<span class="border-switch-control-description">Off</span>
			<input type="checkbox" class="border-switch-control-input">
			<span class="border-switch-control-indicator"></span>
			<span class="border-switch-control-description">On</span>
		</label>
		<label class="custom-control teleport-switch">
			<span class="teleport-switch-control-description">Off</span>
			<input type="checkbox" class="teleport-switch-control-input">
			<span class="teleport-switch-control-indicator"></span>
			<span class="teleport-switch-control-description">On</span>
		</label>
	</div>

	<div class="row">
		<div class="col-sm-6">
			<div class="card my-3">
				<ul class="list-group list-group-flush">
					<li class="list-group-control">
						<label class="custom-control custom-checkbox">
							<input type="checkbox" class="custom-control-input">
							<span class="custom-control-indicator"></span>
							<span class="custom-control-description">Custom checkbox</span>
						</label>
					</li>
					<li class="list-group-control">
						<label class="custom-control overflow-checkbox">
							<input type="checkbox" class="overflow-control-input">
							<span class="overflow-control-indicator"></span>
							<span class="overflow-control-description">Overflow checkbox</span>
						</label>
					</li>
					<li class="list-group-control">
						<label class="custom-control material-checkbox">
							<input type="checkbox" class="material-control-input">
							<span class="material-control-indicator"></span>
							<span class="material-control-description">Material checkbox</span>
						</label>
					</li>
				</ul>
			</div>
		</div>
		<div class="col-sm-6">
			<div class="card my-3">
				<div class="card-body">
					<h4 class="card-title m-0">Card title</h4>
				</div>
				<ul class="list-group list-group-flush">
					<li class="list-group-control">
						<label class="custom-control custom-radio">
							<input name="radio" type="radio" class="custom-control-input">
							<span class="custom-control-indicator"></span>
							<span class="custom-control-description">Custom radio</span>
						</label>
					</li>
					<li class="list-group-control">
						<label class="custom-control custom-radio">
							<input name="radio" type="radio" class="custom-control-input">
							<span class="custom-control-indicator"></span>
							<span class="custom-control-description">Custom radio</span>
						</label>
					</li>
					<li class="list-group-control">
						<label class="custom-control custom-radio">
							<input name="radio" type="radio" class="custom-control-input">
							<span class="custom-control-indicator"></span>
							<span class="custom-control-description">Custom radio</span>
						</label>
					</li>
				</ul>
				<div class="card-body">
					<a href="#" class="btn btn-primary btn-block">Do something</a>
				</div>
			</div>
		</div>
	</div>
</div>
.custom-control{

	&.material-checkbox{
		--color: #26a69a;

		.material-control-input{
			display: none;
			&:checked~.material-control-indicator{
				border-color: var(--color);
				transform: rotateZ(45deg) translate(1px, -5px);
				width: 10px;
				border-top: 0px solid #fff;
				border-left: 0px solid #fff;
			}
		}
		.material-control-indicator{
			display: inline-block;
			position: absolute;
			top: 4px;
			left: 0;
			width: 16px;
			height: 16px;
			border: 2px solid #aaa;
			transition: .3s;
		}
	}

	&.fill-checkbox{
		--color: #26a69a;

		.fill-control-input{
			display: none;
			&:checked~.fill-control-indicator{
				background-color: var(--color);
				border-color: var(--color);
				background-size: 80%;
			}
		}
		.fill-control-indicator{
			border-radius: 3px;
			display: inline-block;
			position: absolute;
			top: 4px;
			left: 0;
			width: 16px;
			height: 16px;
			border: 2px solid #aaa;
			transition: .3s;
			background: transperent;
			background-size: 0%;
			background-position: center;
			background-repeat: no-repeat;
			background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
		}
	}

	&.overflow-checkbox{
		.overflow-control-input{
			display: none;

			&:checked~.overflow-control-indicator{
				&::after{
					transform: rotateZ(45deg) scale(1);
					top: -6px;
					left: 5px;
				}

				&::before{
					opacity: 1;
				}
			}
		}
		.overflow-control-indicator{
			border-radius: 3px;
			display: inline-block;
			position: absolute;
			top: 4px;
			left: 0;
			width: 16px;
			height: 16px;
			border: 2px solid #aaa;

			&::after{
				content: '';
				display: block;
				position: absolute;
				width: 16px;
				height: 16px;
				transition: .3s;
				transform: rotateZ(90deg) scale(0);
				width: 10px;
				border-bottom: 4px solid #aaa;
				border-right: 4px solid #aaa;
				border-radius: 3px;
				top: -2px;
				left: 2px;
			}

			&::before{
				content: '';
				display: block;
				position: absolute;
				width: 16px;
				height: 16px;
				transition: .3s;
				width: 10px;
				border-right: 7px solid #fff;
				border-radius: 3px;
				transform: rotateZ(45deg) scale(1);
				top: -4px;
				left: 5px;
				opacity: 0;
			}
		}
	}

	&.material-switch{
		--color: #26a69a;
		padding-left: 0;

		.material-switch-control-input{
			display: none;
			&:checked~.material-switch-control-indicator{

				&::after{
					background-color: var(--color);
					left: 17px;
				}
			}
		}
		.material-switch-control-indicator{
			display: inline-block;
			position: relative;
			margin: 0 10px;
			top: 4px;
			width: 32px;
			height: 16px;
			background: #ddd;
			border-radius: 16px;
			transition: .3s;

			&::after{
				content: '';
				display: block;
				position: absolute;
				width: 18px;
				height: 18px;
				border-radius: 50%;
				transition: .3s;
				top: -1px;
				left: -1px;
				background: #fdfdfd;
				box-shadow: 0 2px 10px #aaa;
			}
		}
	}

	&.ios-switch{
		--color: #4cd964;
		padding-left: 0;

		.ios-switch-control-input{
			display: none;

			&:active~.ios-switch-control-indicator{
				&::after{
					width: 20px;
				}
			}

			&:checked{
				~.ios-switch-control-indicator{
					border: 10px solid var(--color);

					&::after{
						top: -8px;
						left: 4px;
					}
				}

				&:active~.ios-switch-control-indicator{
					&::after{
						left: 0px;
					}
				}
			}
		}
		.ios-switch-control-indicator{
			display: inline-block;
			position: relative;
			margin: 0 10px;
			top: 4px;
			width: 32px;
			height: 20px;
			background: #fff;
			border-radius: 16px;
			transition: .3s;
			border: 2px solid #ddd;

			&::after{
				content: '';
				display: block;
				position: absolute;
				width: 16px;
				height: 16px;
				border-radius: 16px;
				transition: .3s;
				top: 0px;
				left: 0px;
				background: #fff;
				box-shadow: 0 0 2px #aaa, 0 2px 5px #999;
			}
		}
	}

	&.border-switch{
		--color: #4cd964;
		padding-left: 0;

		.border-switch-control-input{
			display: none;
			&:checked~.border-switch-control-indicator{
				border-color: var(--color);

				&::after{
					left: 14px;
					background-color: var(--color);
				}
			}
		}
		.border-switch-control-indicator{
			display: inline-block;
			position: relative;
			margin: 0 10px;
			top: 4px;
			width: 32px;
			height: 20px;
			background: #fff;
			border-radius: 16px;
			transition: .3s;
			border: 2px solid #ccc;

			&::after{
				content: '';
				display: block;
				position: absolute;
				width: 12px;
				height: 12px;
				border-radius: 50%;
				transition: .3s;
				top: 2px;
				left: 2px;
				background: #ccc;
			}
		}
	}

	&.teleport-switch{
		--color: #4cd964;
		padding-left: 0;

		.teleport-switch-control-input{
			display: none;
			&:checked~.teleport-switch-control-indicator{
				border-color: var(--color);

				&::after{
					left: -14px;
				}

				&::before{
					right: 2px;
					background-color: var(--color);
				}
			}
		}
		.teleport-switch-control-indicator{
			display: inline-block;
			position: relative;
			margin: 0 10px;
			top: 4px;
			width: 32px;
			height: 20px;
			background: #fff;
			border-radius: 16px;
			transition: .3s;
			border: 2px solid #ccc;
			overflow: hidden;

			&::after{
				content: '';
				display: block;
				position: absolute;
				width: 12px;
				height: 12px;
				border-radius: 50%;
				transition: .3s;
				top: 2px;
				left: 2px;
				background: #ccc;
			}

			&::before{
				content: '';
				display: block;
				position: absolute;
				width: 12px;
				height: 12px;
				border-radius: 50%;
				transition: .3s;
				top: 2px;
				right: -14px;
				background: #ccc;
			}
		}
	}
}

.list-group{
	&:first-child .list-group-control:first-child {
		border-top-left-radius: .25rem;
		border-top-right-radius: .25rem;
	}

	&::last-child .list-group-control:last-child {
		border-bottom-left-radius: .25rem;
		border-bottom-right-radius: .25rem;
	}

	&.list-group-flush{
		&:last-child{
			.list-group-control:last-child {
				border-bottom: 0;
				margin-bottom: 0;
			}
		}

		&:first-child{
			.list-group-control:first-child {
				border-top: 0;
			}
		}

		.list-group-control {
			border-right: 0;
			border-left: 0;
			border-radius: 0;
		}
	}

	.list-group-control{
		position: relative;
		display: block;
		margin-bottom: -1px;
		background-color: #fff;
		border: 1px solid rgba(0,0,0,.125);

		.custom-control{
			margin: 0;
			padding: .75rem 1.25rem;
			padding-left: 3rem;
			display: block;

			.custom-control-indicator, .material-control-indicator, .fill-control-indicator, .overflow-control-indicator{
				top: 1rem;
				left: 1.25rem;
			}
		}
	}
}
RUN
add comment
Suggest a different solution or add another example