<input class="hide" id="hd-1" type="checkbox" >
<label for="hd-1">Нажмите здесь, если у вашего оператора код больше 3-ех знаков!</label>
<div>Если код вашего оператора имеет 4 и более заков ( допустимый и стандартный код 3 цифры ) - [ 7-(код из 4-ех и более знаков)-999-99-99 то введите в поле любой случайный номер, а свой корректный напишите в стороке комментариев!
</div>/* скрываем чекбоксы и блоки с содержанием */
.hide,
.hide + label ~ div {
display: none;
}
/* вид текста label */
.hide + label {
margin: 0;
padding: 0;
color: green;
cursor: pointer;
display: inline-block;
}
/* вид текста label при активном переключателе */
.hide:checked + label {
color: red;
border-bottom: 0;
}
/* когда чекбокс активен показываем блоки с содержанием */
.hide:checked + label + div {
display: block;
background: #efefef;
-moz-box-shadow: inset 3px 3px 10px #7d8e8f;
-webkit-box-shadow: inset 3px 3px 10px #7d8e8f;
box-shadow: inset 3px 3px 10px #7d8e8f;
margin-left: 20px;
padding: 10px;
/* чуточку анимации при появлении */
-webkit-animation:fade ease-in 0.5s;
-moz-animation:fade ease-in 0.5s;
animation:fade ease-in 0.5s;
}
/* анимация при появлении скрытых блоков */
@-moz-keyframes fade {
from { opacity: 0; }
to { opacity: 1 }
}
@-webkit-keyframes fade {
from { opacity: 0; }
to { opacity: 1 }
}
@keyframes fade {
from { opacity: 0; }
to { opacity: 1 }
}
.hide + label:before {
background-color: #1e90ff;
color: #fff;
content: "\002B";
display: block;
float: left;
font-size: 14px; <code lang="css">
font-weight: bold;
height: 16px;
line-height: 16px;
margin: 3px 5px;
text-align: center;
width: 16px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.hide:checked + label:before {
content: "\2212";
}
</code>
Цельный код
<code lang="html">
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="discription" content="описание">
<meta name="keywords" content="ключевые слова">
<title>site</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Вход/Регистрация</h1>
<hr>
<form action="htsh.ru" method=post>
<p>Ваш пол:</p>
<label for="id_gender_male"><input type="radio" name="gender" value="male" id="id_gender_male" autofocus>Мужской</label>
<label for="id_gender_female"><input type="radio" name="gender" value="female" id="id_gender_female" checked="checked">Женский</label>
<br>
<hr>
<div>
<p>Введите дату своего рождения:</p>
<input type="date" class="date" name="date" required>
</div>
<hr>
<br>
<p><label for="age">Ваш возраст:</label></p>
<input type="number" id="age" name="age" min="5" max="200" step=1 autocomplete="on" placeholder="гг" tabindex="4" required>
<hr>
<br>
<p><label for="phone">Введите ваш телефон:</label></p>
<input type="tel" name="phone" id="phone" placeholder="Формат: 7хххххххххх" pattern="7[0-9]{10}" autocomplete="on" tabindex="5" maxlength="11" required>
<input class="hide" id="hd-1" type="checkbox" >
<label for="hd-1">текст!</label>
<div>текст!
</div>
<hr>
<br>
<br>
<p><label for="mail">Введите ваш email:</label></p>
<br>
<input type="email" name="email" id="mail" pattern="([A-z0-9_.-]{1,})@([A-z0-9_.-]{1,}).([A-z]{2,8})" placeholder="youradress@mail.com" autocomplete="on" required>
<br>
<br>
<p><label for="login">Логин:</label></p>
<br>
<input type="text" name="login" id="login" maxlength="12" placeholder="Уникальное имя" required>
<br>
<br>
<p><label for="password">Пароль:</label></p>
<br>
<input type="password" name="password" id="password" placeholder="Пароль для последующего входа" required>
<hr>
<br>
<p><label for="adress"><span>Введите адрес доставки:</span></label></p>
<br>
<input type="text" id="id_adress1" name=country placeholder=Россия disabled required>
<input type="text" id="adress" list="town" name="town" placeholder="город" tabindex="11" required>
<datalist id="town">
<option value="Москва">
<option value="Санкт-Петербург">
<option value="Новгород">
<option value="Новосибирск">
<option value="Екатеринбург">
<option value="Казань">
</datalist>
<input type="text" id="id_adress2" name="street" placeholder="улица" tabindex="12" required>
<input type="text" id="id_adress3" name="house" placeholder="дом" tabindex="13" required>
<input type="text" id="id_adress4" name="flat" placeholder="квартира" tabindex="14" required>
<input type="text" id="id_adress5" name="entrance" placeholder="подъезд" tabindex="15" required>
<input type="text" id="id_adress6" name="index" placeholder="индекс" required>
<hr>
<br>
<textarea cols="45" rows="5" name="comments" wrap="hard">Введите ваши коментарии</textarea>
<br>
<textarea cols="45" rows="5" name="wishes" wrap="hard">Введите ваши пожелания</textarea>
<br>
<p id="photo">Фото (логотип)</p>
<input type="file" name="photo" accept="image/*">
<hr>
<div class="button">
<label for="subscribe">Подписаться</label>
<input type="checkbox" id="subscribe" class="subscribe" name="subscribe">
<br>
<input type="submit" class="submit" value="Зарегестрироваться">
<input type="reset" class="reset" value="Сбросить">
<!--<button type="submit" class="submit" value="Зарегестрироваться">
<img src="img/20180701172611.png" alt=Регистрация>
</button>
<button type="reset" class="reset" value="Сбросить">
<img src="img/20180701172611.png">
</button>-->
<br>
</div>
</form>
</body>
</html>
</code>
CSS
<code lang="CSS">
body {
background: url(img/20180626222607.png);
}
hr {
padding: 0;
border: none;
border-top: medium double #333;
background-color: #29b0d3;
text-align: center;
}
h1 {
font-size: 38px;
color: black;
}
p {
font-size: 20px;
}
span {
font-size: 22px;
}
em {
color: black;
font-size: 18px;
}
textarea:hover {
background-color: #e8f8fa;
}
label[for="subscribe"] {
font-size: 22px;
}
.adress {
height: 20px;
width: 150px;
margin: 15px;
}
.button {
text-align: center;
}
.submit {
font-size: 18px;
color: blue;
}
.reset {
font-size: 18px;
color: red;
}
.date {
font-size: 14px;
}
#login {
margin-bottom: 0px;
margin-left: 0px;
}
input[type="text"] {
margin-bottom: 30px;
margin-left: 20px;
}
input {
font-size: 16px;
}
input:hover {
background-color: #ffdec7;
}
input[type="file"]:hover {
background-color: #897cff;
}
input[type="date"] {
background-color: blue;
}
input[type="radio"]:hover {
background-color: blue;
}
/* раскрывающийся блок с текстом */
/* скрываем чекбоксы и блоки с содержанием */
.hide,
.hide + label ~ div {
display: none;
}
/* вид текста label */
.hide + label {
font-size: 20px;
margin: 0;
padding: 25px;
color: #50c878;
cursor: pointer;
display: inline-block;
}
/* вид текста label при активном переключателе */
.hide:checked + label {
color: red;
border-bottom: 0;
}
/* когда чекбокс активен показываем блоки с содержанием */
.hide:checked + label + div {
display: block;
background: #efefef;
-moz-box-shadow: inset 3px 3px 10px #7d8e8f;
-webkit-box-shadow: inset 3px 3px 10px #7d8e8f;
box-shadow: inset 3px 3px 10px #7d8e8f;
margin-left: 20px;
padding: 10px;
/* чуточку анимации при появлении */
-webkit-animation:fade ease-in 0.5s;
-moz-animation:fade ease-in 0.5s;
animation:fade ease-in 0.5s;
}
/* анимация при появлении скрытых блоков */
@-moz-keyframes fade {
from { opacity: 0; }
to { opacity: 1 }
}
@-webkit-keyframes fade {
from { opacity: 0; }
to { opacity: 1 }
}
@keyframes fade {
from { opacity: 0; }
to { opacity: 1 }
}
.hide + label:before {
background-color: #1e90ff;
color: #fff;
content: "\002B";
display: block;
float: left;
font-size: 14px;
font-weight: bold;
height: 16px;
line-height: 16px;
margin: 3px 5px;
text-align: center;
width: 16px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.hide:checked + label:before {
content: "\2212";
}
Простой
Средний
Простой
Средний
Простой
