icon im Select-Felf eines Web Formulars

K

kliph

Cadet 2nd Year

Registriert

Dez. 2013

Beiträge

31

• 30. Juli 2014

• #1

icon im Select-Feld eines Web Formulars

Hallo Computerbase-Community,

ich versuche gerade ein Webform zu erstellen, das in etwa so wie das angehängte Bild aussehen soll.


Nur leider will ich ein Select-Feld mit den Optionen:

1. Anrede (nicht auswählbar)
2. Herr (auswählbar)
3. Frau (auswählbar)

hinzufügen. Damit das Ganze hübsch aussieht soll auch ein entsprechendes icon angelegt werden. Nur bekomme ich dieses nicht eingebunden. Ich habs bereits im Select-Tag und Option-Tag probiert, aber leider beides ohne Erfolg.

Ist das denn überhaupt möglich?

Vielen Dank für eure Unterstützung!

MfG
Kliph!

 

Zuletzt bearbeitet: 30. Juli 2014

D

Daaron

Fleet Admiral

Registriert

Dez. 2011

Beiträge

13.487

• 30. Juli 2014

• #2

Kurz: <select>, <option> und einige andere Elemente können nicht per CSS geskinnt werden. Du brauchst eine JavaScript-Lögung
Lang: https://www.computerbase.de/forum/threads/ie-und-chrome-html-selectbox-zeigt-bild-nicht-an.1374218/

Anrede-Felder solltest du aber nach Möglichkeit meiden. Von verschiedenen akademischen Graden und Adelstiteln abgesehen musst du heute auch noch auf die Transgender achten. Herr/Frau reicht da noch lange nicht.

 

K

kliph

Cadet 2nd Year

Ersteller dieses Themas

Registriert

Dez. 2013

Beiträge

31

• 30. Juli 2014

• #3

Vielen Dank für die Antwort. Das mit den Transgendern hatte ich leider gar nicht gerücksichtigt, werde ich mir aber nochmal überlegen.

Beste Grüße
Kliph

 

Digger-Deluxe

Lt. Junior Grade

Registriert

Juli 2006

Beiträge

282

• 30. Juli 2014

• #4

Gib den Feldern doch eine eindeutige ID und steuer diese mittels CSS an.

Edit:
Geht auch mit dem style-Attribut

 

Zuletzt bearbeitet: 30. Juli 2014

D

Daaron

Fleet Admiral

Registriert

Dez. 2011

Beiträge

13.487

• 30. Juli 2014

• #5

Tja, jetzt bin ich mal gespannt, wie eine ID dabei helfen soll, nicht skinbare Elemente wie <select> oder <option> zu verändern...

 

Digger-Deluxe

Lt. Junior Grade

Registriert

Juli 2006

Beiträge

282

• 30. Juli 2014

• #6

Es geht mit dem style-Attribut und CSS:

<select name="Test" size="" multiple="multiple" style="background: #063;">
<option value="Herr" style="background:#ffffff;">Herr</option>
<option value="Frau" style="background:#000000;">Frau</option>
</select>

 

Zuletzt bearbeitet: 30. Juli 2014

D

Daaron

Fleet Admiral

Registriert

Dez. 2011

Beiträge

13.487

• 30. Juli 2014

• #7

Weite Teile von <select> und <option> können eben NICHT per CSS verändert werden. Lies es nach, Darstellung und Verhalten dieser Elemente (und auch Checkbox & Radio Button) werden vom OS bestimmt, nicht vom Browser. Manche Teile, wie z.B. die Breite oder die Hintergrundfarbe, lassen sich per CSS verändern. Vieles andere geht nicht oder zumindest nicht zuverlässig in jedem Browser.

 

Digger-Deluxe

Lt. Junior Grade

Registriert

Juli 2006

Beiträge

282

• 30. Juli 2014

• #8

Alles geht natürlich nicht, es ist aber möglich:

http://www.htmllion.com/default-select-dropdown-style-just-css.html

 

D

Daaron

Fleet Admiral

Registriert

Dez. 2011

Beiträge

13.487

• 30. Juli 2014

• #9

Ich möcht drauf wetten, dass das Zeug derb putzig aussieht, wenn du es jetzt mit nem Android oder ne iOS-Device aufrufst... Schon die <options> sehen total klatschig aus.
Aber in dem oben von mir verlinkten Thread gibt es ja zum Glück 2 JS-Lösungen für das Problem.

 

Kanibal

Lt. Commander

Registriert

Dez. 2011

Beiträge

1.032

• 30. Juli 2014

• #10

Bootstrap kann das nachbilden. Siehe hier.
Das sollte dann auch auf Android und iOS funktionieren.

 

D

Daaron

Fleet Admiral

Registriert

Dez. 2011

Beiträge

13.487

• 30. Juli 2014

• #11

Der semantische Unterschied zwischen dem Bootstrap-Gemurkse da und nem <select> sollte dir aber klar sein... Du bemerkst ihn spätestens dann, wenn du eine Mobile/Touch-Device hast...