В веб-разработке возникают ситуации, когда нужно взглянуть на стили другого сайта и понять, как они реализованы. Один из таких случаев — когда разработчик хочет узнать, какой цвет используется для плейсхолдера в текстовом поле.
В качестве примера можно привести следующий css-код:
-webkit-input-placeholder {
color: red;
}
Этот код применяет цвет «красный» ко всем плейсхолдерам. Но что, если нужно узнать, какой цвет используется на другом сайте?
Инструменты разработчика, например, в браузере Chrome, обычно не показывают стили плейсхолдера при инспектировании элемента. Однако есть способ обойти это ограничение.
В Chrome Dev Tools можно переключиться на псевдоэлементы и увидеть их стили. Вот как это сделать:
- Откройте инструменты разработчика (F12 или Ctrl+Shift+I).
- Выберите элемент, содержащий плейсхолдер.
- В панели «Styles» нажмите на иконку с тремя точками (:) и выберите «Show all».
- В разделе «Pseudo-elements» найдите «::placeholder» и в нем будет виден стиль плейсхолдера.
Таким образом, с помощью инструментов разработчика можно узнать цвет плейсхолдера, используемый на других сайтах, и использовать его в своих проектах.
Добавить комментарий