Hover in Auswahllisten (option) mit purem CSS

So richtig weiss ich gerade mal wieder nicht, ob ich das Rad durch Zufall neu erfunden habe, zumindest finde ich im Netz mit Ausnahme von ein paar Threads in Webforen mit dem Fazit „geht nicht“ keine Infos zur Problematik.

Gegeben ist eine Auswahlliste wie folgt:

Bei einem Hover (Maus über einem Auswahlpunkt) ändert sich die Hintergrundfarbe zum im Betriebssystem eingestellten Standard. Das ist zwar züchtig, aber nicht immer gewollt.

Abhilfe sollte laut Plan normalerweise etwa:
option:hover {background: #292829;}
schaffen, aber das tut nicht:

„Mein“ Hack ist nun, statt einer Hintergrundfarbe ein Bild zu verwenden:

Voila!

Code:

CSS:
option:hover {background: url(http:/trash-wissen.de/example.gif);}
XHTML:
<form name="Trash" action="trash">
<select name="select">
<option>Auswahlfeld 1</option>
<option>Auswahlfeld 2</option>
<option>Auswahlfeld 3</option>
</select>
</form>

P.s. Wer das auch für IE realisieren möchte, muss zusätzlich ein passendes (Hover-)Script einbinden, siehe dazu: http://dean.edwards.name/IE7/
(Safari mit seiner eigenwilligen Formularbehandlung fällt natürlich ganz aus der Wertung)
P.p.s: WordPress ist echt ’ne Seuche, was das Hantieren mit ein wenig Code betrifft, man kommt aus dem Editieren garnich mehr raus 🙁

Technorati Tags: , ,

9 Kommentare to “Hover in Auswahllisten (option) mit purem CSS”

  1.  Greg schrieb am 07. Mai 2007 um 15:37 zitieren

    Kleiner Bug: Wenn man rechts neben das Menu klickt, erscheint das Hintergrundbild auch (auf voller Breite).

  2.  benjamin schrieb am 07. Mai 2007 um 15:57 zitieren

    firefox auf osx 10.4.9 erzeugt, wenn ich auf den pfeil klicke um das auswahlmenu zu öffnen, dann ist der standardpunkt „1″ immer noch mit dem wunderbaren zartrosa hinterlegt…

  3.  benjamin schrieb am 07. Mai 2007 um 15:58 zitieren

    ok, der satzbau im oberen comment ist fragwürdig… aber irgendwie kommt der inhalt trotzdem rüber – oder?

  4.  Mike® schrieb am 07. Mai 2007 um 16:32 zitieren

    Die Beiden „Bugs“ gehören zusammen. Den „Standard-punkt“ hatte ich probiert über ein :active bzw. :focus zu formen, was keinen Effekt hatte ausser eben dem Schatten neben der Auswahl. Hab’s nun wieder rausgenommen.
    Wenn noch wer ’ne Idee für das :active des „Standard-punkts“ hat, nur her damit, das wäre dann semi-perfekt.

  5.  Blacker47 schrieb am 07. Mai 2007 um 22:48 zitieren

    Also Opera unter Linux zeigt die alle gleich, kein Hintergrundbild.

  6.  Mike® schrieb am 08. Mai 2007 um 0:31 zitieren

    Ja Opera unter Win das Selbe.

    Scheint ein Gecko-phänomen zu sein, Firefox unter KDE tut, Konqueror nicht. Sämtliche Geckos unter Win ab mindestens 0.9x kann man mit oben angegebenem Code bezwingen.
    Nicht-Geckos hatte ich bis jetzt noch keinen in der Hand, der’s tut.

    Schmier ich mir den Kram jetzt in die Haare und verbuch’s unter „Wie krank man in WordPress rumfuhrwerken muss, validen Code in Beiträgen einzubetten – und Greg sagt noch: „Nimm verflucht ’ne „externe“ Seite“ 😉

  7.  Blacker47 schrieb am 08. Mai 2007 um 18:52 zitieren

    Naja, ist es nicht die selbe Sache wie mit Scrollbalken, welche eigentlich doch nicht umformatiert werden sollten?

    Außerdem ist es recht doof Hintergrundfarbe zu setzen, ohne Text-Farbe setzen zu können. Und selbst wenn Textfarbe ginge, würde man ja diese nicht ohne Hintergrundfarbe setzen wollen, für den Fall, das die Bilder nicht geladen werden.

    Wie es aussieht, brauchen wir Web3.0!!!1111222334

    😉

  8.  Farben in Dropdownfeldern – XHTMLforum schrieb am 05. Aug 2009 um 8:11 zitieren

    [...] [...]

  9.  Sebastian Gellweiler schrieb am 09. Jul 2011 um 20:54 zitieren

    Der folgende Code enthält einige Verbesserungen. Durch das Einfügen eines weißen Bildes wird der von benjamin beschriebene Fehler behoben. Um zu verhindern, dass der Text unter das Bild rutscht, wird mit der Pseudo-Klasse first-line der Text wieder nach vorne geholt.


    option{
    background: transparent url('./images/formelements/white.png') repeat;
    color:#000000;
    }
    option:hover, option:focus, option:active{
    background: transparent url(‘./images/formelements/orange.png‘) repeat;
    color:#000000;
    }
    option:first-line{
    display:inline-block;
    color:#000000;
    background: transparent;
    z-index:1;
    }

    Ps:
    Ich hoffe man versteht was ich meine.

Trackback-Adresse | RSS-Feed für die Kommentare abonnieren

Hinterlasse einen Kommentar:


(Wir behalten uns vor Kommentare von dummen Menschen entweder zu löschen oder exemplarisch für die Nachwelt zu konservieren. Dumme Kommentare mit Werbelinks müssen leider auf zweiteres Privileg verzichten.)

XHTML: Du kannst diese Tags verwenden:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>