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ü:

<div class="drop-filter">
  <button onclick="drop_func()" class="drop-icon">Filter-Grafik</button>
 
  <div id="dropdown" class="selections">
      <select>
        <option value="1">Pure CSS Select</option>
        <option value="2">No JS</option>
        <option value="3">Nice!</option>
      </select>
  </div>
</div>

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:

<div class="dropdown">
    <div class="icon-filter" onclick="selectFunction()">
                                    
    </div>
</div>
<div class="dropdown-content" id="myDropdown">
       <div class="button-select-menue">
            <button type="submit" name="filter-select" value="test" class="select-button">Option 1</button>
       </div>
       <div class="button-select-menue">
            <button type="submit" name="filter-select" value="test" class="select-button">Option 2</button>
       </div>
       <div class="button-select-menue">
            <button type="submit" name="filter-select" value="test" class="select-button">Option 3</button>
       </div>
 </div>

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:

<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.