[HTML, CSS] Selectbox formatieren, Hintergrund

[wahnsinn]

Ich würde gerne eine <select>-Box mit CSS an das Layout der restlichen Seite anpassen. Hintergrund-Image wäre ideal, aber das hat weder der Firefox noch der IE zufrieden stellend gepackt. Hat jemand eine Idee, wie das doch zu schaffen wäre?

Alternativ bin ich schon den Kompromiss eingegangen, nur eine Hintergrundfarbe zu verwenden. Im Firefox sieht's ziemlich akzeptabel aus aber der IE zickt da etwas rum. Die Box hat zwar den Hintergrund an die Farbe angepasst, aber zwischen dem Text der Box und dem Rahmen (ebenfalls mit CSS definiert) ist noch ein zusätzlicher weißer Rand, der enorm stört.

Hat jemand eine Idee, wie ich der Selectbox eine Hintergrundgrafik geben kann? Oder alternativ, wie ich zumindest den weißen Extra-Rand des IE besiegen kann?

 

[exportforce]

<form name="form1">
<select name="select" style="color : red">
<option value="1">Link Nr. </option>
<option value="2">Link Nr.</option>
<option value="3">Link Nr.</option>
</select>
</form>

Du kannst das ganz normal mit CSS formatieren, wie jeden anderen Bereich auch

edit:
du kannst es auch in der CSS festhalten:

select  {
    font-size: 1.2em;
    background-color: ivory;
    color: red;
    font-weight: bold;
    padding: 11px;
    border:3px solid violet;
    width: 13em;
    }

option  {
   padding: 11px  33px;
   background-image:  url(https://www.domain.de/bla.gif);
   background-position:  left;
   background-repeat: no-repeat   }

 

[wahnsinn]

Ich weiß sehr wohl, wie es theoretisch geht. Ich hab oben mal ein bisschen Formatiert, damit mein konkretes Problem deutlich wird.

 

[exportforce]

Ich weiß sehr wohl, wie es theoretisch geht. Ich hab oben mal ein bisschen Formatiert, damit mein konkretes Problem deutlich wird.

Und ich bin auf alles eingegangen mit der css-datei Variante
Setz mal das ein und änder die URL auf das BG ab das du nutzen willst und bei der Border machst du einfach aus der 3 ne 0

Das sollte eigentlich funzen.

 

[wahnsinn]

Ich find's ja nett, dass du mir helfen willst. Aber schau mal bitte das hier im Internet-Explorer an. Da ist nichts wie erwartet.

Und auch habe ich keinen Weg gefunden, einer "nicht ausgeklappten" Selectbox ein Hintergrundbild zu geben. Es wär nämlich ideal, wenn die Selectbox im nicht ausgeklappten Zustand eine Hintergrundgrafik hätte und die ausgeklappte <options>-Liste nur eine Hintergrundfarbe.

Aber ich befürchte, da wird mir niemand helfen können.

Werd ich's wohl in Javascript nachbauen müssen.

 

[exportforce]

nimm mal als URL die KOMPLETTE url.
Das sollte gehen, ansonsten immer mit ./bild.gif oder ./ordern/bild.gif
Nur mit bild.gif gibt öfter beim IE Probleme, soweit ich das mitbekommen hab.

edit:
Gerade gelesen das der IE keine Images für options nehmen kann, das können nur die Geckos.

lg

 

[wahnsinn]

Ne du, ich glaub das wird nichts mehr.

 

[exportforce]

Ne du, ich glaub das wird nichts mehr.

Lies mal mein Edit, das sollte dir alles erklären, warum das bei Select im IE nicht geht

 

[wahnsinn]

Ich wurde gerade, nach fast 3 Jahren, per E-Mail nochmal zu diesem Thread befragt. Ich will meine bisherigen Erfahrungen aber mit Euch allen teilen und nicht in eine E-Mail-Diskussion verlagern. Sonst würde ja der Sinn eines öffentlichen Forums verloren gehen.

Ich habe inzwischen ein tolles JavaScript-Tool geschrieben, mit dem ich Select-Boxen beliebig durch grafische Elemente ersetzen kann. Das Script ist sehr ausgereift und ersetzt automatisch alle vorhandenen Selectboxen durch die stylebaren HTML-Elemente. Auch onchange-Events bleiben dabei erhalten. Leider darf ich das Script nicht weiter geben.

Allerdings hab ich inzwischen auch das auf jQuery basierende Uniform gefunden. Damit können nicht nur Selectboxen gestyled werden, sondern auch Checkboxen, Radiobuttons, Fileupload-Felder etc.
Uniform scheint ziemlich umfangreich und auch gut dokumentiert zu sein. Da ich aber mein eigenes Script habe, das an meine Bedürfnisse angepasst ist, hab ich Uniform bis jetzt noch nicht getestet und kann keine konkreten Hilfen geben.

Also wenn jemand wissen will, welche Technologie dahinter steckt, kann er gerne meinen oben verlinkten Blog-Eintrag lesen. Wenn jemand einfach 'ne Lösung sucht, der darf auf Uniform zurück greifen.