Lesefortschritt:

Schliessen-Icon des Divi-Standardsuchmoduls anpassen

10. September 2025 | CSS-Stylesheet, Divi-Theme

Trick # 493 | Dieser Beitrag beinhaltet 276 Wörter. – Geschätzte Lesezeit: ca. 2 Minuten.

Die Standardkopfzeile des Divi-Themas enthält ein Suchsymbol, das beim Anklicken ein Suchfeld aufruft. Dieses Suchfeld enthält ein graues «Kreuz»-Symbol, das zum Schliessen des Suchfeldes verwendet werden kann. Wenn Sie eine andere Farbe wünschen, können Sie das Symbol selber gestalten.

In unserem Beispiel soll das «Schliessen»-Kreuz blau dargestellt werden und – sobald die Maus darüber bewegt wird – auf grün wechseln. Das geschieht mit folgendem CSS-Code, den Sie in das Stylesheet Ihrer Divi-Website – unter Design/Customizer/Zusätzliches CSS – einfügen:

.et_close_search_field:after {
    color:#293280;
}
.et_close_search_field:hover:after {
    color: #59B14B;
}

Das Icon sieht dann normal so aus:

und beim Hovern so:

Für andere Farben passen Sie den Code ganz einfach an.

Werbung

Keine Inhalte gefunden.

Werbung

 

Pin It on Pinterest

Share This
Überblick über den Datenschutz

Diese Website verwendet Cookies, damit wir Ihnen die bestmögliche Benutzererfahrung bieten können. Cookie-Informationen werden in Ihrem Browser gespeichert und dienen dazu, Sie wiederzuerkennen, wenn Sie auf unsere Website zurückkehren, und unserem Team zu helfen, zu verstehen, welche Bereiche der Website Sie am interessantesten und nützlichsten finden.