Olika stilar på varje enskild option i en select

4 svar · 335 visningar · startad av stephan 21 mars 2006

stephanMedlem sedan feb. 2006117 inlägg

Frågan21 mars 2006 11:02#1

Går det att få till olika typsnitt, färger, storlekar och textstilar på resektive option i en select-box?

JavaScript eller inte spelar ingen roll. Behöver bara funka i Internet Explorer, men också gärna FireFox. Vi kan kräva att besökaren har senaste version av sin browser.

nitro2k01Medlem sedan aug. 20039 340 inlägg

21 mars 2006 11:19#2

IE klarar bara av färg och bakgrundsfärg, medan FF klarar av använda vilka CSS-attribut som helst. Så tvinga dina användare att använda FF! :)

<style type="text/css">
.opt1{
	font-family: arial;
}

.opt2{
	font-family: "times new roman";
	color: green;
	background: red;
}

.opt3{
	font-family: "times new roman";
	color: blue;
	background: url('http://www.google.se/images/hp0.gif');
	font-size: 20px;
}

.opt4{
	border: 3px solid red;
}

</style>

<select>
<option class="opt1">Arial</option>
<option class="opt2">Röd times new roman</option>
<option class="opt3">Google</option>
<option class="opt4">Röd ram</option>

</select>

stephanMedlem sedan feb. 2006117 inlägg

21 mars 2006 15:11#3

Jag försökte nåt liknande själv förut, men det funkar tyvärr inte i IE.

TroxyMedlem sedan mars 20041 505 inlägg

21 mars 2006 18:53#4

Jag kan tillägga att select-elementet är helt ombyggt från scratch i nya IE7. Det kommer således ha många fler möjligheter för CSS. Vilka vet jag inte exakt dock, men förhoppningsvis just detta.

stephanMedlem sedan feb. 2006117 inlägg

23 mars 2006 19:02#5

Testade precis nitro2k01:s kod i IE7 Beta 2 Preview (20060125.153820), och där blev den helt ostajlad.