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.

  • Zitat

    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.

    Die Optionen hast Du ja schon. Damit die ausgewählte mit dem Formular übertragen wird, musst Du dem Select ein name-Attribut geben.

  • 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?

  • Ok danke.


    Ich werde wahrscheinlich ein irgendwas aus allem zusammenbasteln, auch mit Hilfe der Links, bis das Ergebnis stimmt :)


    Ich wünsche noch ein schönes WE.

  • 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
    <div class="icon-filter" onclick="selectFunction()">
                                        
    </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.

  • Was code ist das?

    Wo ist das selectmenü ?

    Wo ein Bild?

    Das ist gar nichts.

    Wir brauchen den ganzen Code oder Link zu Seite.


    Das wäre das gleiche, wenn ich ein Reifen zu Werkstatt trage und frage, warum das Auto nicht anspringt

Jetzt mitmachen!

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