Select Menü mit CSS gestalten

  • Hallo zusammen,


    ich möchte ein Select Menü gestalten mit mehreren Optionen.

    Eigentlich ganz simpel, ich möchte statt den Text auf den man klickt und das Auswahl Menü öffnet,

    nur eine Grafik auf die man klickt.


    Also ich habe eine kleine Grafik (z.B. ein Symbol für Filter), wenn man darauf klickt öffnet das Menü

    mit der entsprechenden Auswahl. Hat man ausgewählt, verschwindet die Auswahl wieder und bleibt

    ganz normal im Hintergrund für das Formular selektiert.


    Kann mir dabei jemand helfen?


    Liebe Grüße

    Tobi

  • Ich habe schon eine mögliche bzw. mir die liebste Variante gefunden.

    Z.B. hier einmal das schlichte Select Menü:


    Es gibt entsprechend etwas Java dazu, dass mit klick auf eine "Filter-Grafik" der div-Container "dropdown" gedroppt wird.

    In diesem ist jetzt natürlich das Select Menü. Ich weiß nicht genau, wie ich in diesem Dropdown einfach Optionen anzeigen

    lassen kann, die selektiert und dann mit dem Formular übergeben werden können.

  • Ich habe mich glaube nicht verständlich ausgedrückt.


    Wie in meinem Beispiel habe ich eine Grafik, wenn ich auf diese klicke dropt ein Container auf, in diesem ist dann ein weiteres Select-Menü

    das ich dann öffnen kann und etwas auswählen kann.


    Ich möchte aber nicht die Verschachtelung, sondern dass direkt die Options angezeigt werden.


    Kurz gesagt ein ganz normales Select/Option Menü, aber ohne Text im Default Zustand. Also man sieht nur eine kleine Grafik, auf die kann man klicken

    und dann öffnet sich das Options Menü.


    Ich habe jetzt für mich diese Lösung gefunden, bin aber nicht ganz zufrieden damit:


    Funktioniert jetzt so, ganz ohne Select Menü. Ist die einzige Lösung wie ich es geschafft habe nur eine Grafik als Drop-Button zu haben.

    Bei klick auf den div "icon-filter" dropt der div "dropdown-content", darin habe ich frei gestaltbare divs und Buttons, die bei klick das umschließende Formular absenden und eine Variable mitgeben.


    Aber es muss doch auch möglich sein, ein Select Menü mit NUR einer Grafik zu öffnen?

  • So wie du dir das vorstellt, geht es nicht so einfach.

    Wenn dann machst, du es so wie du es schon hast und baust dir was Eigenes zusammen ,

    was ich aber anders machen würde als wie du es gemacht hast, z. B. so

    https://basti1012.bplaced.net/…rdner=html-seminar&id=456

    Oder man nimmt sowas https://jqueryui.com/selectmenu/#custom_render

  • Eine andere Frage, ich habe es mit der Grafik mittlerweile geschafft. Jetzt ist das Problem, wenn ich daraufklicke, dann blinkt der kleine vertikale Strich,

    der anzeigt an welcher Stelle im Text man sich befindet. Da dort aber nur eine Grafik ist, blinkt dieser hässliche Strich auf der Grafik.


    Kann man das irgendwie unterbinden?

  • Code ist eigentlich nur dieser:

    Code
    1. <div class="icon-filter" onclick="selectFunction()">
    2. </div>

    Dieses div ist 1 x 1 rem und eine kleine klickbare Grafik. Wenn diese jedoch klickt, blinkt dieser kleine vertikale Textpositionsanzeiger in der Grafik.