Здесь представлены поля для выбора, что можно увидеть при регистраций или заполнение на сайте. Теперь они созданы на чистом CSS, где обычно требуется по-другому взглянуть на пустые элементы input / textarea, чтобы пользователю стало ясно, что им нужно их заполнить.
Ранее для этого требовалось немного Javascript, но теперь это можно сделать, используя только CSS, воспользовавшись недавно представленным псевдоклассом, показанным в качестве заполнителя :placeholder-shown.
Так получится после, как все установите по месту.
HTML
Код
<div id="samisapog-sdevalopas">
<div>
<label>Имя *</label>
<input type="text" name="name" class="required-field" placeholder="Name" />
</div>
<div>
<label>Почта *</label>
<input type="text" name="email" class="required-field" placeholder="Email" />
</div>
<div>
<label>Описание</label>
<input type="text" name="address" placeholder="Address" />
</div>
</div>
CSS
Код
#samisapog-sdevalopas {
border: 1px solid rgba(0,0,0,0.1);
padding: 30px;
font-size: 14px;
margin: 40px 0;
}
#samisapog-sdevalopas div {
margin: 0 0 20px 0;
}
#samisapog-sdevalopas div:last-child {
margin: 0 !important;
}
#samisapog-sdevalopas label {
margin: 0 0 5px 0;
display: block;
font-size: 12px;
}
#samisapog-sdevalopas input {
border: 2px solid #cccccc;
display: block;
font-size: inherit;
font-family: inherit;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
#samisapog-sdevalopas input.required-field:placeholder-shown {
border: 2px solid #686de0;
}
:placeholder-shown - это селектор для элементов input / textarea, которые в настоящее время показывают текст местозаполнителя, это означает, что они в основном пусты.
