Select-Liste mit Symbolen ausstatten bzw. Selected markieren

  • Hallo,


    ich arbeite mit Joomla und habe dort ein TemplateSwitcher integriert. Ich möchte meinen Besuchern anbieten, das Template von Hell auf Dunkel zu wechseln.


    Damit es aber auch grafisch angezeigt wird, wollte ich dem Inhalt ein Symbol hinzufügen:


    Hier kommt der Code aus der PHP

    PHP
    <?php echo JHtmlSelect::genericlist($templates->options, 'template', "class=\"inputbox\" style=\"margin:0\" aria-describedby=\"Kontrast\"", 'value', 'text', $curr_template_idx,'CG_TS_Select'); ?>

    Hier der Code, der ausgegeben wird

    Code
    <select id="CG_TS_Select" name="template" class="inputbox" style="margin:0" aria-describedby="Kontrast">
    <option value="10">Dunkel</option>
    <option value="9" selected="selected">Hell</option>
    </select>


    In der CSS hatte ich nun folgendes ausprobiert:


    Code
    option[value="9"]:before{
        content: ">";
        font-size:1em;
        color:#FF0000;
    }

    aber das funktioniert nicht! Auch nicht, wenn ich nochmal die Schrift deklariere. Wenn ich das :before wegnehme wird zumindest die Schriftfarbe geändert ....


    Auch über die Funktion selected kann ich nichts im CSS einstellen ....


    Hat jemand von Euch eine Idee? Meine Seite liegt leider offline auf meinem PC ... da sie noch im Testmodus ist ;)


    Viele Grüße

    Nissepuk

  • Wie ich weiß kann man bei den <option> Tag kein before oder after anwenden.

    Auch Bilder lassen sich da nicht einfügen .

    Du könntest aber entities nutzen das sollte gehen.


    Oder du baust dir selber so ein option Menü, dann kannst du das gestalten wie du willst


    Was willst du den da als Icon nehmen ?

  • Hallo,


    ich wollte zumindest gerne einen Haken für den aktuellen Stand hinter dem Text stehen haben. Ansonsten hätte ich auch gerne vor dem Text ein Kontrastzeichen, aber das wäre nicht ganz so wichtig.


    Bin mir sowieso noch unsicher - ob das der richtige Weg ist. Ich bin gerade dabei ein Template zu erstellen was barrierefrei ist und man darf ja Links oder eine Auswahl nicht nur allein mit Farbe kennzeichnen.


    Entities - damit habe ich noch nie gearbeitet - hab ich gerade mal gegoogelt .... mmmhhh - da hab ich wohl etwas Lesebedarf :)


    Viele Grüße

    Nissepuk

  • Wenn es nur zwei Optionen sind, könnte man daran denken, statt eines Select Radiobuttons mit Labels zu verwenden. Dann tut man sich mit der Gestaltung wesentlich leichter und ein benutzerdefinierter Haken wäre kein Problem.

  • Hallo,


    Du meinst, aus der DropDown-Liste könnte ich auch ein Feld mit Radiobuttons machen? Ähm ... da bin ich jetzt aber doch überfragt, wie das geht ....


    Mein eigentlicher Wunsch wäre ja ein ToggleButton, aber das kann ich leider nicht realisieren mit dem obigen Code.... Daher wäre ich mit einem Haken schon sehr zufrieden :)

  • Zitat

    Togglebutton wäre auch kein Problem, einfach einen Checkbutton mit Label und entspr. gestalten ;(;(;(;(

    Wenn es doch tatsächlich so einfach wäre ... oder ist es das tatsächlich???


    Ich müsste doch eigentlich dann den PHP-Code ändern, nun gibt er ja eben diese Selectliste raus - Togglebutton + Checkbutton - das kann ich ja nicht allein mittels CSS machen ... oder? Und bei PHP bin ich mir noch nicht so sicher ...

  • Zitat

    Ich müsste doch eigentlich dann den PHP-Code ändern, nun gibt er ja eben diese Selectliste raus

    Ob das einfach oder kompliziert ist, hängt wesentlich davon ab, ob Du auf das PHP auf der einen Seite und die Auswertung auf der anderen Seite ohne weiteres Zugriff hast. Du schreibst ja, dass Du Joomla verwendest und dann ist es u. U. im CMS vergraben und Du bist auf CSS angewiesen.

  • Entities - damit habe ich noch nie gearbeitet - hab ich gerade mal gegoogelt .... mmmhhh - da hab ich wohl etwas Lesebedarf :)

    Ich weiß ja nicht für was ihr euch jetzt hier entschieden habt , weil Radio Buttons ist bei 2 auswahl möglichkeiten noch besser.

    Kommt ja auch drauf an wie weit du dich damit auskennen tust den Php Code und so weiter zu ändern.

    Mit Entities( oder anderen ) siehst du hier wie wie ich das ungefähr meinte

    https://www.mediaevent.de/spie…ren-css-fuer-option-tags/

    Es gibt da nee Menge Zeichen ( Bildchen ) die man da einbauen kann auf dieser art)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!