А ви зможете зробити це за допомогою CSS?(Частина перша)

3 хв. читання

Простий приклад

Тут ми маємо три текстових поля, які використовують місцезаповнювачі.

Як ви можете бачити - нічого складного. Коли ви фокусуєтесь на якомусь з полів, то з'являється назва цього поля, певного роду нагадування користувачу, що саме він повинен вводити:

    <div class="form-row">
      <input class="input-text" id="name2" placeholder="Your Email" type="email">
      <label class="label-helper" for="name2">Your Email</label>
    </div>

Нічого незвичайного у даному HTML фрагменті. Єдине, що виходить за рамки стандарту - тег label, який знаходиться після тегу input.

Тепер за допомогою СSS потрібно привести це в дію:

    .form-row {
      position: relative;
    }
     
    .input-text {
      background-color: #fff;
      border: 1px solid #ccc;
      margin-bottom: 8px;
      padding: 8px 4px;
      position: relative;
      width: 100%;
      z-index: 3;
    }
     
    .label-helper {
      bottom: 0;
      left: 0;
      opacity: 0;
      position: absolute;
      transition: .2s bottom, .2s opacity;
      z-index: 1;
    }

Це перша частина СSS запроваджує стилі елементів форми за умовчуванням. Клас .form-row підтримує абсолютне позиціонування, а .label-helper знаходиться поряд з відповідним полем вводу.

Елемент .input-text має position:relative, також потрібно вказали z-index, щоб наш label після не накладався на поле для вводу.

Тепер СSS, який обрабляє наші назви(.label-helper), так щоб вони показувались, при фокусуванні:

    .input-text:focus + .label-helper,
    .input-text:invalid + .label-helper {
      bottom: 95%; /* magic number, boo */
      font-family: arial;
      font-size: 14px;
      line-height: 1;
      opacity: 1;
      padding: 4px;
    }
     
    .input-text:invalid {
      border-left: 10px solid #f00;
    }
     
    .input-text:invalid + .label-helper:after {
      color: #f00;
      content: "X";
      font-family: arial;
      font-size: 14px;
      line-height: 1;
      padding-left: 12px;
    }

Дуже важливий елемент, який використовується це :focus та поряд "братський" селектор + (взагалі такі селектори це дуже важлива частина усього данного фрагменту).

Ми маємо використовувати .label-helper після нашого .input-text оскільки наш селектор не працює навпаки.

По суті, коли фокус знаходиться на полі для вводу, то наш label стає повністю непрозорим та перебуває над полем вводу.

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 4.8K
Приєднався: 10 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація