Axel Richter: Grafiken in Auswahlliste nicht möglich?

Beitrag lesen

Hallo,

das Beispiel klappt nur, wenn das Bild in der gleichen Rootebene ist und value keine URL enthält.

Was zu beweisen wäre ;-).

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
<title>Testseite Graphiken in Option-Elementen</title>  
<style type="text/css">  
option#deutschland:before { content:url("http://aktuell.de.selfhtml.org/artikel/css/optionbilder/de.gif"); }  
option[value="http://www.google.de/search?q=irland"]:before { content:url("http://aktuell.de.selfhtml.org/artikel/css/optionbilder/ie.gif"); }  
</style>  
</head>  
<body>  
<p>  
 <select size="3">  
  <option id="deutschland" value="http://www.google.de/search?q=deutschland">Deutschland</option>  
  <option id="irland" value="http://www.google.de/search?q=irland">Irland</option>  
 </select>  
</p>  
</body>  
</html>  

Das funktioniert bei Dir im FireFox nicht?

Es existiert allerdings ein Problem, wenn im Wert von value ein Semikolon enthalten ist, bspw.: value="http://www.google.de/search?hl=de&amp;q=irland". Dann funktioniert der Attribut-Selektor nicht mehr. Wie man das umgehen kann, habe ich mit dem Id-Selektor für Deutschland gezeigt.

viele Grüße

Axel