php 复选框 - 自定义样式

Posted 2021-05-04

.custom-checkboxes{

	label{
		display: inline-block;
		width: auto;
		margin: 0px 15px 0 0px;
		color: white;
		vertical-align: middle;
		text-transform: uppercase;
		font-weight: normal;
		padding-left: 23px;
		position: relative;

		input[type="checkbox"]{
			width: 18px;
			height: 18px;
			display: inline-block;
			opacity: 0;
			position: absolute;
			top: 3px;
			left: 0;
			margin: 0;
			z-index: 9;
			cursor: pointer;

			&:checked + .custom-box:before{
				opacity: 1;
				transform: rotate(-45deg) scale(1);
			}
		}

		.custom-box{
			position: absolute;
			display: block;
			width: 18px;
			height: 18px;
			bottom: 2px;
			left: 0;
			background: transparent;
			border: 2px solid white;
			border-radius: 3px;
			vertical-align: middle;

			&:hover{
				cursor: pointer;
			}

			&:before{
				opacity: 0;
				display: block;
				content: '';
				position: absolute;
				width: 9px;
				height: 5px;
				background: transparent;
				top: 4px;
				left: 3px;
				border: 2px solid white;
				border-top: none;
				border-right: none;
				transform: rotate(-45deg) scale(0);
				transition: ease transform 0.4s, ease opacity 0.4s;
			}
		}
	}
}

<div class="custom-checkboxes">
	<label class="checkbox-item">
		Windows
		<input type="checkbox" name="Field7" value="Windows">
		<div class="custom-box"></div>
	</label>
	<label class="checkbox-item">
		Windows
		<input type="checkbox" name="Field8" value="Windows">
		<div class="custom-box"></div>
	</label>
</div>