Edit in JSFiddle

<div class="checkbox-control-border">
  <label class="control">
    Первый checkbox
    <input type="checkbox" name="checkbox-2-1" checked="checked">
    <div class="control_indicator"></div>
  </label>
  <label class="control">
    Второй checkbox
    <input type="checkbox" name="checkbox-2-1">
    <div class="control_indicator"></div>
  </label>
  <label class="control">
    Выключенный
    <input type="checkbox" name="checkbox-2-2" disabled="disabled">
    <div class="control_indicator"></div>
  </label>
  <label class="control">
    Выключенный и выбранный
    <input type="checkbox" name="checkbox-2-2" disabled="disabled" checked="checked">
    <div class="control_indicator"></div>
  </label>
</div>
.checkbox-control-border {
	margin-bottom: 40px;
  font-family: Tahoma;
	
	.control {
		display: block;
		position: relative;
		padding-left: 30px;
		margin-bottom: 15px;
		padding-top: 3px;
		cursor: pointer;
		font-size: 18px;

		input {
			position: absolute;
			z-index: -1;
			opacity: 0;

			&:checked {

				& ~ .control_indicator {
					border-color: #ccc;

					&:after {
						display: block;
					}
				}
			}

			&:disabled {

				& ~ .control_indicator {
					background: transparent;
					opacity: .6;
					pointer-events: none;

					&:after {
						background: #ccc;
					}
				}
			}
		}

		&_indicator {
			position: absolute;
			top: 5px;
			left: 0;
			height: 20px;
			width: 20px;
			border-radius: 0px;
			background: #fff;
			border: 1px solid #ccc;

			&:after {
				box-sizing: unset;
				content: '';
				position: absolute;
				display: none;
				left: 3px;
				top: 3px;
				height: 14px;
				width: 14px;
				border-radius: 0;
				background: #ccc;
			}
		}

		&:hover {

			.control_indicator {

				&:after {
					display: block;
				}
			}
		}
	}
}