• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Выбор поля ввода input текста на CSS (Селектор CSS для полей ввода текста при помощи CSS)
Выбор поля ввода input текста на CSS
Kosten
Дата: Воскресенье, 2019-10-20, 20:10 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25120
Награды: 57


Здесь представлены поля для выбора, что можно увидеть при регистраций или заполнение на сайте. Теперь они созданы на чистом 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, которые в настоящее время показывают текст местозаполнителя, это означает, что они в основном пусты.
Прикрепления: 8810466.jpg(14.8 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Выбор поля ввода input текста на CSS (Селектор CSS для полей ввода текста при помощи CSS)
  • Страница 1 из 1
  • 1
Поиск: