Огляньте webkit-input-placeholder за допомогою інструментів для розробників

225

Можна заповнити заповнювач тексту тексту таким чином:

-webkit-input-placeholder {
    color: red;
}

Я переглядаю веб-сайт в Інтернеті, і я хотів би використовувати той самий колір заповнення, що і вони. Чи можна розібратися, який колір вони використовували? Я хотів би включити будь-які альфа-значення, тому я не можу просто випробувати колір за допомогою редактора зображень.

Коли я перевіряю елемент за допомогою інструментів Dev Chrome, я бачу:

введіть тут опис зображення

Інструменти розробника не надають інформацію щодо елемента-заповнювача при огляді вхідного елемента. Чи є інший спосіб?

html css

— Шон Андерсон
джерело

можливий дублікат Як змінити колір заповнення на фокус?

— cport1

Ні ... Я чітко заявляю в питанні, що я знаю, як це змінити, але що мені цікаво, як перевірити властивості іншої людини. Я навіть надаю зразок коду, який показує, що я знаю, як це змінити.

— Шон Андерсон

що таке веб-сайт? Оскільки заповнювач заповнення є псевдоелементом, ви все одно можете мати змогу бачити стилі при огляді цього елемента.

— cport1

Відповіді:

457

Я зрозумів це.

Трюк полягає в тому, щоб увімкнути "Показати тінь агента користувача DOM" на панелі налаштувань Інструментів для розробників Chrome:

введіть тут опис зображення

Щоб перейти до налаштувань, натисніть кнопку "⋮" у верхньому правому куті панелі інструментів Dev, потім натисніть Налаштування, і це знаходиться на вкладці Налаштування за замовчуванням.

З цим ви тепер можете це побачити:

введіть тут опис зображення

— Шон Андерсон
джерело

Налаштування там у 62, і воно працює чудово.

— Ізервуд

Chrome 67 і ваше рішення також застосовується

— gefrag

@gefrag Я також використовую Chrome 67, але не можу знайти цю опцію. Чи можете ви, будь ласка, на якій вкладці він зараз знаходиться?

— Бен Карп

Хтось знає, як бачити ::placeholderпсевдоелемент, який зараз широко підтримується?

— swrobel

@swrobel робочий процес, згаданий у цій відповіді, дозволяє вам перевірити ::placeholder. Дивіться цю пов’язану відповідь .

— Кейс Баскі

Для версії 69 Chrome Google:
Відкрийте елементи перевірки: на Mac ⌘ + Shift + C, у Windows / Linux Ctrl + Shift + C АБО F12.
Натисніть кнопку "⋮" вгорі праворуч, а потім перейдіть до налаштувань
У налаштуваннях натисніть Налаштування> Клацніть Показати агент користувача Shadow DOM

На поданих нижче зображеннях зображено процес:

Перейдіть до налаштувань> Налаштування:

Клацніть на Показати агент користувача Shadow DOM:

Перегляд CSS-заповнювача:

— Джей Супеда
джерело