Як змінити колір тексту заповнювача в полях введення HTML за допомогою CSS

Стилізуйте текст-заповнювач за допомогою CSS

Працюючи з формами HTML, ви можете налаштувати вигляд тексту-заповнювача в полях введення. Хоча Chrome v4 та інші веб-переглядачі підтримують атрибут placeholder для елементів input[type=text], просте застосування стилів CSS до цього атрибута не завжди працює належним чином.

Наприклад, спроба змінити колір тексту заповнювача за допомогою стандартних селекторів CSS не дасть бажаних результатів. У цій статті досліджується, як можна ефективно змінювати колір тексту-заповнювача за допомогою правильних псевдоелементів CSS і правил браузера.

Розуміння методів стилізації тексту-заповнювача

Перший сценарій використовує ::placeholder, псевдоелемент CSS, який спеціально націлений на текст-заповнювач поля введення. Це надзвичайно важливо, оскільки стандартні селектори CSS не впливають на текст заповнювача. З допомогою input::placeholder, ми можемо застосувати стилі безпосередньо до тексту заповнювача, наприклад змінити його колір на червоний. Крім того, сценарій містить спеціальні селектори браузера, наприклад input:-moz-placeholder для Mozilla Firefox і input::-ms-input-placeholder для Internet Explorer і Microsoft Edge. Ці селектори забезпечують сумісність у різних браузерах, дозволяючи однаково оформляти колір тексту заповнювача незалежно від вибору браузера користувача.

Другий сценарій використовує JavaScript для динамічної зміни кольору тексту заповнювача. Вона починається з DOMContentLoaded подія, щоб забезпечити виконання сценарію лише після повного завантаження початкового документа HTML. The querySelector потім використовується для вибору вхідного елемента. Прослуховувачі подій додаються до цього елемента для обробки подій фокусування та розмивання. Коли поле введення отримує фокус, текст покажчика місця заповнення очищається, а колір тексту введення стає чорним. Коли поле введення втрачає фокус, текст заповнювача відновлюється, а його колір стає червоним. The setAttribute Метод використовується для динамічного оновлення атрибута заповнювача, гарантуючи, що текст заповнювача з’являється та зникає належним чином.

input::placeholder {
  color: red;
  opacity: 1; /* Firefox */
}

/* For Mozilla Firefox */
input:-moz-placeholder {
  color: red;
  opacity: 1;
}

/* For Internet Explorer 10-11 */
input:-ms-input-placeholder {
  color: red;
}

/* For Microsoft Edge */
input::-ms-input-placeholder {
  color: red;
}

document.addEventListener("DOMContentLoaded", function() {
  var input = document.querySelector('input[type="text"]');

  input.addEventListener('focus', function() {
    input.style.color = "black";
    input.setAttribute('placeholder', '');
  });

  input.addEventListener('blur', function() {
    input.style.color = "red";
    input.setAttribute('placeholder', 'Value');
  });
});

Розширені методи стилізації заповнювача

Окрім базових методів CSS і JavaScript, існують більш просунуті методи стилізації тексту-заповнювача. Одним із таких методів є використання змінних CSS для створення більш динамічної системи стилів. Змінні CSS, також відомі як спеціальні властивості, дозволяють розробникам зберігати значення, які можна повторно використовувати в таблиці стилів. Це може спростити процес оновлення стилів для кількох елементів. Наприклад, визначивши спеціальну властивість для кольору заповнювача, ви можете легко змінити колір в одному місці, не змінюючи кілька правил CSS.

Іншим аспектом, який слід розглянути, є використання фреймворків і бібліотек, які пропонують розширені можливості стилю. Бібліотеки, такі як Bootstrap, і фреймворки, такі як Tailwind CSS, надають попередньо визначені класи, які можуть допомогти стилізувати елементи форми, включаючи заповнювачі. Ці інструменти можуть заощадити час і забезпечити узгодженість у різних частинах програми. Крім того, використання препроцесорів, таких як SASS або LESS, може ще більше покращити CSS за допомогою таких функцій, як вкладення, міксини та успадкування, роблячи код більш придатним для обслуговування та масштабованим.

Останні думки про техніку стилізації заповнювачів

Щоб змінити колір тексту-заповнювача в полях введення HTML, потрібна комбінація рішень CSS і JavaScript. Використання псевдоелементів CSS і селекторів браузера забезпечує сумісність, тоді як JavaScript дозволяє динамічно змінюватися на основі взаємодії користувача. Розширені методи, такі як змінні CSS, фреймворки та препроцесори, можуть ще більше покращити процес стилізації, зробивши його ефективнішим і зручнішим для обслуговування. Оволодіння цими методами дозволяє краще контролювати естетику форми, покращуючи досвід користувача.