Support » Allgemeine Fragen » Input Schriftfarbe in search form

  • Gelöst computermobil

    (@computermobil)


    Hallo Gemeinde.

    Hier gehts zur Website

    Habe über die function.php ein Suchfeld im Header mit folgendem Code eingebaut:

    function fb_add_search_box ( $items, $args ) {
    
           // only on primary menu
           if( 'primary' === $args -> theme_location )
                 $items .= '<li class="menu-item menu-item-search">' . get_search_form( FALSE ) . '</li>';
    
           return $items;
     }
     add_filter( 'wp_nav_menu_items', 'fb_add_search_box', 10, 2 );

    Was auch soweit funktioniert, ich btinge nur die Schriftfarbe nicht hin wenn man eine Eingabe macht.
    Vielleicht irgendeine Idee was ich als custom CSS hinzufügen muß?

    Vielen Dank für Eure Hilfe.

Ansicht von 9 Antworten - 1 bis 9 (von insgesamt 9)
  • Hallo!
    Klappt es nicht mit z.B. folgender Anweisung?

    .menu-item-search {
    color: #000 ;
    }

    Thread-Starter computermobil

    (@computermobil)

    Genau so hat es jetzt wunderbar geklappt.
    Habe das so ins custom css eingetragen und funzt.
    Super, vielen Dank Flower33!

    Hallo computermobil,

    ich erweitere das CSS von Flower33 um folgendes:

    .menu-item-search input[type="search"].search-field {
    color: red;
    }

    Statt rot einfach deine gewünschte Farbe einsetzen.

    Viele Grüße,
    Jessica

    Hallo Jessica,
    Danke für deine Anmerkung! Ich denke, das *kann* man natürlich so weit spezifizieren, die Frage aus meiner Sicht ist, ob man es tatsächlich *muss*, denn außer dem Suchfeld kommt in diesem Listenpunkt .menu-item-search nur noch das Eingabefeld der Klasse .search-submit vor, und dessen Textfarbe wird als Weiß spezifiziert, so dass eigentlich kein weiterer Text in diesem Listenpunkt betroffen ist. Insofern reicht nach meinem Dafürhalten der von mir vorgeschlagene Code und spart durch die Kürze zudem einige Bytes, was ja auch der Performance nicht abträglich ist. Falls es hingegen bekannte browserspezifische Schwierigkeiten mit meinem Vorschlag geben sollte, wäre es nett, wenn du das etwas weiter erläutern könntest. Das müsste man natürlich berücksichtigen und die Anweisung entsprechend ausführlich spezifizieren. Danke dir!

    Je spezifischer ein CSS-Selektor ist, desto geringer ist die Wahrscheinlichkeit, dass du versehentlich an anderen Stellen Änderungen vornimmst, die nicht beabsichtigt waren. Die paar Extra-Bytes fallen dabei bezüglich Performance nicht ins Gewicht. Lediglich der höhere Rechenaufwand für die Interpretation des recht spezifischen Selektors wäre zu überlegen, aber dann wird es auch schon recht akademisch.

    Das sehe ich im Großen und Ganzen genau so, wobei die gesparten Bytes sich natürlich im Gesamtzusammenhang dennoch in performance-relevanter Weise zusammenläppern können, wenn man konsequent nicht bis ins Letzte, aber stets hinreichend spezifiziert und dabei auf mögliche ungewollte Auswirkungen achtet. Im aktuellen Fall kommt z. B. noch ein weiteres Suchfeld am Ende der Seite mit heller Schrift hinzu, aber es hat ja nicht die Klasse .menu-item-search. Insofern reicht nach meinem Dafürhalten in diesem speziellen Fall der von mir angegebene Code, aber es ist natürlich richtig, dass, wenn @computermobil auf absolute Nummer Sicher gehen möchte, sie mit der ganz ausführlichen Spezifikation noch besser bedient ist.

    Thread-Starter computermobil

    (@computermobil)

    Hallo Leute.
    Vielen Dank für Eure Antworten. Ich hab jetzt den Code von @flower33 verwendet, denn der funktioniert schon. Und habe wieder was dazugelernt 😉

    hi Flower33
    der Browser muss CSS verarbeiten, das macht er nach bestimmten Regeln, und je weniger Cascade man nutzt, desto schneller ist er dabei.
    d.h. bei performten CSS sind nicht nur die gesparten bites and bytes wichtig, sondern das auch wie man an der Cascade spart.
    Hier einer von vielen Artikeln dazu:
    https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS

    Hallo Monika,

    bei performten CSS sind nicht nur die gesparten bites and bytes wichtig, sondern das auch wie man an der Cascade spart.

    Danke für deine Anmerkung!
    Könntest du das vielleicht mal noch im konkreten Vergleich der beiden oben genannten Code-Varianten ein bisschen erläutern?

Ansicht von 9 Antworten - 1 bis 9 (von insgesamt 9)
  • Das Thema „Input Schriftfarbe in search form“ ist für neue Antworten geschlossen.