В това ръководство ще обясним различни методи за промяна на цвета на контейнера за въвеждане чрез CSS.
Метод 1: Променете цвета на контейнера за въвеждане с помощта на селектор „::placeholder“.
CSS “ ::заместител ” селекторът се използва за избиране на елементите на формуляра с текста на контейнера. Може да се използва за промяна на текста на контейнера. Освен това можете да използвате този селектор, за да промените цвета на контейнера за въвеждане.
Синтаксис
Синтаксисът на ::placeholder е както следва:
:: контейнер {
цвят : стойност
}
На мястото на „ стойност ”, можете да зададете цвета на контейнера за въвеждане според нашия избор.
Нека преминем към практическия пример, където ще променим цвета на контейнера за въвеждане.
Пример
За да променим цвета на контейнера за въвеждане, първо ще създадем входен елемент с помощта на тага и ще зададем типа вход като „ текст ”. След това задайте текста на контейнера за въвеждане като „ Въведете твоето име ”.
HTML
< тяло >< вход Тип = 'текст' контейнер = 'Въведете вашето име' >
< / тяло >
Резултатът от дадения код е:
Цветът по подразбиране на контейнера за въвеждане е показан на горното изображение.
Сега преминаваме към CSS и използваме „ ::заместител “ за достъп до текста на контейнера за въвеждане и задаване на цвета му като „ rgb(17, 0, 255) ”.
CSS
:: контейнер {цвят : rgb ( 17 , 0 , 255 ) ;
}
Както можете да видите, цветът на добавения контейнер за въвеждане е променен на син:
Има друг метод за промяна на цвета на контейнера за въвеждане. Нека да го проверим.
Метод 2: Промяна на цвета на контейнера за въвеждане с помощта на елемент на псевдоклас „::-webkit-input-placeholder“
“ :: – webkit-input-placeholder ” елементът на псевдокласа представлява основно текста на контейнера на елемент на формуляр. Може да се използва от дизайнери и разработчици на теми, за да персонализират външния вид на текста на контейнера. Освен това, като използва посочения елемент, потребителят може да промени цвета на контейнер за въвеждане.
Синтаксис
Синтаксисът на ::-webkit-input-placeholder е даден като:
:: -webkit-input-placeholder {цвят : стойност
}
На мястото на „ стойност ”, можете да зададете цвета на контейнера за въвеждане.
Нека преминем към примера, за да разберем обсъдения по-горе псевдокласов елемент.
Пример
В CSS файла използвайте „ ::-webkit-input-placeholder ” псевдокласов елемент и присвоете стойността на цвета като „ rgb(255, 13, 13) ”:
:::: -webkit-input-placeholder {цвят : rgb ( 255 , 13 , 13 ) ;
}
Изход
Тук можете да видите, че цветът по подразбиране на контейнера за въвеждане е променен.
Заключение
Цветът на контейнера за въвеждане се променя с помощта на „ ::заместител ” селектор и „ :: – webkit-input-placeholder ” псевдокласов елемент. Използвайки това, можете да промените цвета по подразбиране на контейнера за въвеждане. В тази статия обяснихме процедурата, свързана с промяна на цвета на контейнера за въвеждане чрез CSS свойства.