<!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;
}
Простой
Средний