Überprüfen Sie den Platzhalter für Webkit-Eingaben mit Entwicklertools

225

Es ist möglich, den Platzhalter einer Texteingabe folgendermaßen zu gestalten:

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

Ich schaue mir eine Website online an und möchte dieselbe Platzhalterfarbe verwenden wie sie. Ist es möglich herauszufinden, welche Farbe sie verwendet haben? Ich möchte alle Alpha-Werte einschließen, daher kann ich die Farbe nicht einfach mit einem Bildeditor abtasten.

Wenn ich das Element mit Chrome Dev Tools inspiziere, sehe ich:

Geben Sie hier die Bildbeschreibung ein

Dev Tools liefert bei der Überprüfung des Eingabeelements keine Informationen zum Platzhalterelement. Gibt es eine andere Art und Weise?

html css

— Sean Anderson
quelle

Mögliches Duplikat von Wie ändere ich die Farbe der Platzhalter im Fokus?

— cport1

Nein ... Ich stelle in der Frage klar, dass ich weiß, wie ich es ändern kann, aber ich frage mich, wie ich die Eigenschaften einer anderen Person überprüfen kann. Ich stelle sogar ein Codebeispiel zur Verfügung, das zeigt, wie ich es ändern kann.

— Sean Anderson

Was ist die Website? Da der Platzhalter ein Pseudoelement ist, sollten Sie die Stile bei der Überprüfung dieses Elements weiterhin sehen können.

— cport1

Antworten:

457

Ich habe es herausgefunden.

Der Trick besteht darin, "Benutzeragent-Schatten-DOM anzeigen" im Einstellungsfenster der Chrome Developer Tools zu aktivieren:

Geben Sie hier die Bildbeschreibung ein

Um zu den Einstellungen zu gelangen, klicken Sie oben rechts im Bereich "Entwicklertools" auf die Schaltfläche "⋮" und dann auf "Einstellungen". Diese befindet sich auf der Registerkarte "Standardeinstellungen".

Damit können Sie es jetzt sehen:

Geben Sie hier die Bildbeschreibung ein

— Sean Anderson
quelle

Die Einstellung ist dort in 62 und es funktioniert wunderbar.

— Isherwood

Chrome 67 und Ihre Lösung gilt auch

— gefrag

@gefrag Ich verwende auch Chrome 67, kann diese Option jedoch nicht finden. Kannst du bitte in welcher Registerkarte es sich jetzt befindet?

— Ben Carp

Weiß jemand, wie man das ::placeholderPseudoelement sieht, das jetzt weitgehend unterstützt wird?

— Swrobel

@swrobel Mit dem in dieser Antwort genannten Workflow können Sie eine Überprüfung durchführen ::placeholder. Siehe diese verwandte Antwort .

— Kayce Basques

Für Google Chrome Version 69:
Öffnen Sie Inspect Elements: Unter Mac ⌘ + Umschalt + C, unter Windows / Linux Strg + Umschalt + C ODER F12.
Klicken Sie oben rechts auf die Schaltfläche "⋮" und dann auf Einstellungen
Klicken Sie in den Einstellungen auf Einstellungen> Klicken Sie auf Benutzeragent Shadow DOM anzeigen

Die folgenden Bilder zeigen den Vorgang:

Gehen Sie zu Einstellungen> Einstellungen:

Klicken Sie auf Benutzeragenten anzeigen Shadow DOM:

Zeigen Sie das CSS des Platzhalters an:

— Jay Supeda
quelle