Sprawdź symbol zastępczy wejściowego zestawu narzędzi internetowych za pomocą narzędzi programistycznych

225

Możliwe jest nadanie stylu symbolowi zastępczemu wprowadzania tekstu w następujący sposób:

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

Patrzę na stronę internetową online i chciałbym użyć tego samego koloru zastępczego, co oni. Czy można dowiedzieć się, jakiego koloru użyli? Chciałbym dołączyć dowolne wartości alfa, więc nie mogę po prostu próbkować koloru za pomocą edytora obrazów.

Kiedy sprawdzam element za pomocą Chrome Dev Tools, widzę:

wprowadź opis zdjęcia tutaj

Narzędzia deweloperskie nie dostarczają informacji dotyczących elementu zastępczego podczas sprawdzania elementu wejściowego. Czy jest inny sposób?

html css

— Sean Anderson
źródło

możliwy duplikat Jak zmienić kolor zastępczy na fokus?

— cport1

Nie ... W pytaniu jasno stwierdzam, że wiem, jak to zmienić, ale zastanawiam się, jak sprawdzić właściwości cudzej osoby. Podaję nawet próbkę kodu pokazującą, że wiem, jak to zmienić.

— Sean Anderson

jaka jest strona Ponieważ symbol zastępczy jest pseudoelementem, nadal powinieneś widzieć style podczas sprawdzania tego elementu.

— cport1

Odpowiedzi:

457

Rozgryzłem to.

Sztuką jest włączenie opcji „Pokaż cień DOM klienta agenta” w panelu Ustawienia Narzędzi Chrome dla programistów:

wprowadź opis zdjęcia tutaj

Aby przejść do ustawień, kliknij przycisk „⋮” w prawym górnym rogu panelu Narzędzi deweloperskich, a następnie kliknij Ustawienia i znajduje się pod domyślną zakładką Preferencje.

Dzięki temu możesz teraz to zobaczyć:

wprowadź opis zdjęcia tutaj

— Sean Anderson
źródło

Ustawienie jest w 62 i działa pięknie.

— isherwood

Chrome 67 i twoje rozwiązanie również ma zastosowanie

— gefrag

@gefrag Używam również Chrome 67, ale nie mogę znaleźć tej opcji. Czy możesz, proszę, w której zakładce się teraz znajduje?

— Ben Carp

Czy ktoś wie, jak zobaczyć ::placeholderpseudoelement, który jest obecnie szeroko obsługiwany?

— swrobel

@swrobel Przepływ pracy wymieniony w tej odpowiedzi umożliwia sprawdzenie ::placeholder. Zobacz tę pokrewną odpowiedź .

— Kayce Basques

W przypadku przeglądarki Google Chrome w wersji 69:
Otwórz Inspect Elements: na Macu Sh + Shift + C, na Windows / Linux Ctrl + Shift + C LUB F12.
Kliknij przycisk „⋮” w prawym górnym rogu, a następnie Idź do ustawień
W ustawieniach kliknij Preferencje> Kliknij Pokaż agenta użytkownika Shadow DOM

Poniższe obrazy pokazują proces:

Przejdź do ustawień> Preferencje:

Kliknij opcję Pokaż agenta użytkownika Shadow DOM:

Zobacz CSS symbolu zastępczego:

— Jay Supeda
źródło