Wie kann man das Lupensymbol des Input fields ansteuern?
Guten Tag,
ich baue momentan ein Suchfeld (input type search) in eine Testseite ein. Ich sehe gerade, dass das Inputfeld vom type Search mit einem integrierten Lupensymbol daherkommt. Die default Farbe ist zwar passend für den Lightmode meiner Seite, im Darkmode ist sie allerdings nicht mehr zu sehen. Daher meine Frage: Gibt es eine Art Pseudoklasse in CSS für diese, um diese umzustylen?
Vielen Dank im Voraus! :)
1 Antwort
In den aktuellen Browserversionen von Chrome, Firefox, Opera oder Edge gibt es kein solches Suchicon (es wurde schon wieder entfernt). Daher würde ich erst einmal hinterfragen, wieso bei dir ein Icon erscheint.
Du könntest einmal in der Entwicklerkonsole (Chrome, Opera) unter Settings / Preferences die Checkbox Show user agent shadow DOM aktivieren und dann im Inspektor schauen, welche Elemente unter dem Eingabefeld noch gerendert werden.
In Chrome gibt es da bspw. dieses Element (ein Button zum Löschen des Feldinhalts):
<div pseudo="-webkit-search-cancel-button" id="search-clear" style=""></div>
Welches du in CSS auch folgendermaßen ansprechen kannst:
input[type=search]::-webkit-search-cancel-button {
/* ... */
}
Lies dazu auch hier.
Du kannst einmal schauen, ob du es mit diesem Selektor
input[type="search"]::-webkit-search-results-button
ansprechen kannst. Wenn nicht, stell sicher, dass du kein results-Attribut auf dem Element hast (das gehört eh nicht zum Standard) oder nutze einfach gleich ein normales Textfeld. Das Formular kann stattdessen als Suchformular gekennzeichnet werden:
<form role="search">
Ja, habe es nun in ein normales Textfeld umgewandelt und werde bei Bedarf manuell ein Lupenbild einspeisen, das dann in allen Browsern gleichermaßen angezeigt wird. Danke für den Beitrag, wieder was gelernt :)
Ja, habe gerade tatsächlich gesehen, dass die Lupe nur auf dem Safari iOS Browser sichtbar ist. Danke für die Info 👍