Ü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
16
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
5
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
2
@swrobel Mit dem in dieser Antwort genannten Workflow können Sie eine Überprüfung durchführen ::placeholder. Siehe diese verwandte Antwort .
Kayce Basques
31
  1. Für Google Chrome Version 69:
  2. Öffnen Sie Inspect Elements: Unter Mac ⌘ + Umschalt + C, unter Windows / Linux Strg + Umschalt + C ODER F12.
  3. Klicken Sie oben rechts auf die Schaltfläche "⋮" und dann auf Einstellungen
  4. 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:
Gehen Sie zu Einstellungen> Einstellungen

Klicken Sie auf Benutzeragenten anzeigen Shadow DOM:
Geben Sie hier die Bildbeschreibung ein

Zeigen Sie das CSS des Platzhalters an:
Geben Sie hier die Bildbeschreibung ein

Jay Supeda
quelle