@pro100nic

Как убрать область тега label?

5d679fe21c573630439369.png
<!DOCTYPE html>
<html>
	<head>
		<link href="style.css" type="text/css" rel="stylesheet">
	</head>
	<body>
		<form action="" method="post" name="check">
		
		<ul class="list">
			<li>алмазная резка<input type="checkbox" class="checkbox" id="almaznaya_rezka" value="алмазная резка" name="check[]"/><label for="almaznaya_rezka"></label>
				<ul>
					<li>алмаз_1<input type="checkbox" class="checkbox" id="almaznaya1" value="алмаз_1" name="check[]"/><label for="almaznaya1"></label></li>
					<li>алмаз_2<input type="checkbox" class="checkbox" id="almaznaya2" value="алмаз_2" name="check[]"/><label for="almaznaya2"></label></li>
				</ul>
			</li>
			<li>архитектура<input type="checkbox" class="checkbox" id="arhitektura" value="архитектура" name="check[]"/><label for="arhitektura"></label></li>
			<li>асфальт<input type="checkbox" class="checkbox" id="asfalt" value="асфальт" name="check[]"/><label for="asfalt"></label></li>
			<li>барельеф<input type="checkbox" class="checkbox" id="barelef" value="барельеф" name="check[]"/><label for="barelef"></label></li>
			<li>бурение<input type="checkbox" class="checkbox" id="burenie" value="бурение" name="check[]"/><label for="burenie"></label></li>
			<li>бетонные работы<input type="checkbox" class="checkbox" id="betonnye_raboty" value="бетонные работы" name="check[]"/><label for="betonnye_raboty"></label></li>
			<li>венецианка<input type="checkbox" class="checkbox" id="venecianka" value="венецианка" name="check[]"/><label for="venecianka"></label></li>
			<li>вагонка<input type="checkbox" class="checkbox" id="vagonka" value="асфальт" name="check[]"/><label for="vagonka"></label></li>
			<li>витражи<input type="checkbox" class="checkbox" id="vitraji" value="асфальт" name="check[]"/><label for="vitraji"></label></li>
			<li>ворота<input type="checkbox" class="checkbox" id="vorota" value="ворота" name="check[]"/><label for="vorota"></label></li>
			<li>гипсокартон<input type="checkbox" class="checkbox" id="gipsokarton" value="асфальт" name="check[]"/><label for="gipsokarton"></label></li>
			<li>двери<input type="checkbox" class="checkbox" id="dveri" value="двери" name="check[]"/><label for="dveri"></label></li>
				<ul>
					<li>деревянные<input type="checkbox" class="checkbox" id="dveri_der" value="асфальт" name="check[]"/><label for="dveri_der"></label>
						<ul>
							<li>изготовление<input type="checkbox" class="checkbox" id="dveri_der_izg" value="асфальт" name="check[]"/><label for="dveri_der_izg"></label></li>
							<li>установка<input type="checkbox" class="checkbox" id="dveri" value="асфальт" name="check[]"/><label for="dveri"></label></li>
							<li>реставрация<input type="checkbox" class="checkbox" id="dveri" value="асфальт" name="check[]"/><label for="dveri"></label></li>
						</ul>
					</li>
					<li>металлические<input type="checkbox" class="checkbox" id="dveri" value="асфальт" name="check[]"/><label for="dveri"></label>
						<ul>
							<li>изготовление<input type="checkbox" class="checkbox" id="dveri" value="асфальт" name="check[]"/><label for="dveri"></label></li>
							<li>установка<input type="checkbox" class="checkbox" id="dveri" value="асфальт" name="check[]"/><label for="dveri"></label></li>
							<li>реставрация<input type="checkbox" class="checkbox" id="dveri" value="асфальт" name="check[]"/><label for="dveri"></label></li>
						</ul>
					</li>
					<li>пластиковые<input type="checkbox" class="checkbox" id="dveri" value="асфальт" name="check[]"/><label for="dveri"></label>
						<ul>
							<li>изготовление<input type="checkbox" class="checkbox" id="dveri" value="асфальт" name="check[]"/><label for="dveri"></label></li>
							<li>установка<input type="checkbox" class="checkbox" id="dveri" value="асфальт" name="check[]"/><label for="dveri"></label></li>
							<li>реставрация<input type="checkbox" class="checkbox" id="dveri" value="асфальт" name="check[]"/><label for="dveri"></label></li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
		
		<input type="submit" value="сохранить" id="save">
		</form>
		
		<div id="responce">
			<?php
				echo '<select>';
				echo 'Selected: <br>';
				$category = isset($_POST['check']) ? $_POST['check']: '';
				if (!empty($category)){
					foreach ($category as $a){
						//echo htmlentities($a).'<br>';
						 echo '<option>'.$a.'</option><br>';
					}
				}
				echo '</select>';
			?>
			
		</div>
	</body>
</html>


.list{
	
}

.list li{
	font-size:18px;
	list-style:none;
}

.list li ul li{
}

.list li ul{
}

.list li ul li:hover{
	display:block;
}

.checkbox {
  position: absolute;
  z-index: -1;
  opacity: 0;
  margin: 10px 0 0 20px;
}

.checkbox + label {
  position: relative;
  padding: 0 0 0 60px;
  cursor: pointer;
}

.checkbox + label::before {
  content: '';
  position: absolute;
  top:2px;
  left:12px;
  width:40px;
  height:17px;
  border-radius:13px;
  background:#CDD1DA;
  box-shadow:inset 0 2px 3px rgba(0,0,0,.2);
  transition:.2s;
}

.checkbox + label::after {
  content: '';
  position: absolute;
  top:2px;
  left:12px;
  width:17px;
  height:17px;
  border-radius:10px;
  background:#fff;
  box-shadow:0 2px 5px rgba(0,0,0,.3);
  transition:.2s;
}

.checkbox:checked + label:before{
	background:#32cd32;
}

.checkbox:checked + label:after{
	left:35px;
}

#save{
	width:350px;
	height:50px;
	margin:0;
	padding:0;
	border-radius:0;
	color:#ff4500;
	font-size:25px;
	-webkit-appearance:none;
}

#responce{
	font-size:17px;
}

label{
	margin:0;
	padding:0;
	margin-left:20px;
	background:#007aae;
}
  • Вопрос задан
  • 429 просмотров
Решения вопроса 2
Anitamsk
@Anitamsk
Frontend Dev
.checkbox + label {
  position: relative;
  padding: 0 0 0 60px;
  cursor: pointer;
  background-color: transparent;                   -------- меняет цвет вашего label.
}

5d67a4d144d43366473189.png
Ответ написан
Nolis
@Nolis
it-гопник
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы