Archivlink: javarea.de Forum > (X)HTML & CSS (allgemein) > Im Oprea ein <option>-Feld per CSS formatieren
Vollständigen Link anzeigen: javarea.de Forum > (X)HTML & CSS (allgemein) > Im Oprea ein <option>-Feld per CSS formatieren

Pages: [1]
geschrieben von Matneu am 02.10.2005 - 11:34
Moin,

ich möchte gerne eines von mehreren <option>-Feldern per CSS formatieren. Am liebsten natürlich global, also ohne Klasse. Allerdings funktioniert nichts mit Opera 8.5. Der Code:
HTML-Quelltext
1: 
2: 
3: 
4: 
5: 

<select name="foo">
    <option>bar1</option
    <option disabled="disabled">---</option>
    <option>bar2</option>
</select>


Bisherige Versuche:

- In der CSS-Datei:
HTML-Quelltext
1: 
2: 
3: 

.option[disabled] {
    background-color:#f00;
}

- Per Klasse:
HTML-Quelltext
1: 
2: 
3: 
4: 
5: 

.disabled {
    background-color:#f00;
}
[..]
<option disabled="disabled" class="disabled">---</option>

- Im Code:
HTML-Quelltext
1: 

<option disabled="disabled" style="background-color:#f00;">---</option>


Absolut alles wie gesagt ohne Erfolg. Mit dem IE oder FF funktioniert es teilweise.
Ich bin allerdings der Meinung, dass ich auch mit Opera schon einige Menüs gesehen habe, die farbig oder anders formatiert waren, allerdings findet man die, wenn man sie braucht, natürlich nicht.

So far...
Matthias

geschrieben von Jan am 02.10.2005 - 11:39
Hi!

Der obere Sperrator funktioniert nicht unter IE.

-> http://www.css4you.de/wscss/css03.html#attribut1

HTML-Quelltext
1: 
2: 
3: 

option[disabled] {
    background-color:#f00;
}


option ist keine Klasse, also ohne Punkt. Es bleibt dir also nicht anderes übrig, als für den IE die Klasse zur Verfügung zu stellen.

Gruß
Jan

geschrieben von René am 02.10.2005 - 13:15
Hallo Matthias,

sag nicht das Opera ein Browser ist . Ich denke das Problem liegt nicht am CSS sondern an ... . Das disabled einer einzelnen Option dürfte generell nicht funktionieren wenn dann das ganze Select.

Hier mal mit IE, Firefox und Mozilla;

CSS
HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 

.option_leer
{
	background-color: #dfdfdf;
}

.option_send
{
	background-color: #d9ffd9;
	color: #dc143c;
}


HTML
HTML-Quelltext
1: 
2: 

<option class="option_leer" value="">...</option>
<option class="option_send" value="...">...</option>

geschrieben von Matneu am 02.10.2005 - 14:56
Zitat
 Original geschrieben von Jan am 02.10.2005 - 11:39
option ist keine Klasse, also ohne Punkt. Es bleibt dir also nicht anderes übrig, als für den IE die Klasse zur Verfügung zu stellen.

Das mit dem Punkt war ein Flüchtigkeitsfehler, wie es früher so schön hiess
Dass der IE nicht funktioniert macht nichts, das Menü des Skripts basiert eh auf CSS2, wodurch sich der IE von Anfang an disqualifiziert. Es sollte halt mit den halbwegs aktuellen Browsern wie FF, Opera, Konquerer etc. funktionieren.

Zitat
 sag nicht das Opera ein Browser ist

Opera ist meiner Meinung nach der beste Browser, der als Ausgleich zu den vielen Vorteilen allerdings ein paar kleine Schwächen hat (z. B. bei sehr vielen Daten). Ich fürchte allerdings langsam auch, dass es an Opera liegt.

Zitat
 Das disabled einer einzelnen Option dürfte generell nicht funktionieren wenn dann das ganze Select.

Laut SelfHTML ist es zumindest für HTML4.01 erlaubt. Da XHTML1 praktisch auf HTML4.01 basiert denke ich, dass es dort immer noch erlaubt ist.
Auch das W3C erkennt meinen Code als valide.

Also schiebe ich das Problem mal auf Opera und erkläre es damit als "gelöst"

So far...
Matthias

geschrieben von Martin am 02.10.2005 - 18:43
Ave,

kleine Bemerkung zu Opera und CSS2.1. Zwar soll Opera den neuesten W3C Standart unterstützen. Meiner Erfahrung nach ist das aber nur die halbe Wahrheit.

HTML-Quelltext
1: 
2: 
3: 

option[disabled] {
    background-color:#f00;
}


Ist in soweit falsch, das es immer eine Notation mit Vergleichen/Operatoren sein muss. So wie schon mehrfach angesprochen ist die HTML Notation <input .... disabled /> nicht standhaft in XHTML1.1 strict.

Richtig müsste es <input ... disabled=true /> oder <input disabled=disabled /> lauten (Je nach Browser) Daraus ergibt sich auch eine andere CSS Definition.

HTML-Quelltext
1: 
2: 
3: 

option[disabled=disabled|true] {
    background-color:#f00;
}


http://www.w3.org/TR/1998/REC-CSS2-....-selectors

mfg martin

geschrieben von Matneu am 03.10.2005 - 07:10
Zitat
 Original geschrieben von Martin am 02.10.2005 - 18:43
HTML-Quelltext
1: 
2: 
3: 

option[disabled] {
    background-color:#f00;
}

Ist in soweit falsch, das es immer eine Notation mit Vergleichen/Operatoren sein muss. So wie schon mehrfach angesprochen ist die HTML Notation <input .... disabled /> nicht standhaft in XHTML1.1 strict.

Laut Deinem geposteten Link ist es so erlaubt:
Zitat
 [att]
Match when the element sets the "att" attribute, whatever the value of the attribute.


Zitat
 Richtig müsste es <input ... disabled=true /> oder <input disabled=disabled /> lauten (Je nach Browser) Daraus ergibt sich auch eine andere CSS Definition.

Im Source steht bei mir
Zitat
 <option disabled="disabled"

, sollte also eigentlich funktionieren. Das disabled funktioniert ja auch, lediglich die Formatierung klappt unter Opera nicht.

So far...
Matthias


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.