stijl van een option value aanpassen
Ik probeer 1 van mijn options van een select box een bepaalde stijl te geven, dit doe ik als volgt:
Code (php)
1
<option value="test" style=\"color: red; font-weight: bold;\">test</option>
Het probleem is dat ik deze stijl wel zie in de dropdownbox, maar als ik het selecteer krijgt het terug de normale stijl (geen kleur, niet bold). In IE doet hij het wel goed, maar Mozilla en Chrome willen niet mee, en moet natuurlijk ook lukken hier..
Is er een manier om dit te omzeilen of op te lossen?
Opmaak/stijl beter via css
Denk eerder dat IE het 'per ongeluk' goed doet.
Is dit wel mogelijk wat ik wil bereiken?
Quote:
Gebruik nooit inline CSS, dus height="" style="" ect..
Kan je dit motiveren?
Daarnaast is het gebruik van een stylesheet en classes/ids beter aangezien je makkelijk meerdere element kan stylen.
Verder kan je met een stylesheet goed gebruik maken van bepaalde overruled styles die met inline style niet werken.
En je moet ook gewoon kijken naar het gebruik van een taal. HTML is voor het semantisch weergeven van data en CSS voor het stylen. Het gebruik van style is HTML dus totaal niet voor gemaakt.
Ik heb ergens op internet een scriptje gevonden wat miss een basis zou kunnen zijn:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>
<head>
<title>Select</title>
<script language="JavaScript">
function displayOption(divName)
{
document.getElementById(divName).innerText=document.form1.select1.options[document.form1.select1.selectedIndex].value;
}
</script>
</head>
<body bgcolor="#FFFFFF">
<!--BEGIN FORM-->
<form name="form1">
<select name="select1" onChange="displayOption('div1');">
<option value="India">India</option>
<option value="USA">USA</option>
<option value="UK">UK</option>
</select>
</form>
<!--END FORM-->
<div id="div1" style="font-family:verdana,arial,helvetica; font-weight:bold; color:#FF0000"></div>
</body>
</html>
<head>
<title>Select</title>
<script language="JavaScript">
function displayOption(divName)
{
document.getElementById(divName).innerText=document.form1.select1.options[document.form1.select1.selectedIndex].value;
}
</script>
</head>
<body bgcolor="#FFFFFF">
<!--BEGIN FORM-->
<form name="form1">
<select name="select1" onChange="displayOption('div1');">
<option value="India">India</option>
<option value="USA">USA</option>
<option value="UK">UK</option>
</select>
</form>
<!--END FORM-->
<div id="div1" style="font-family:verdana,arial,helvetica; font-weight:bold; color:#FF0000"></div>
</body>
</html>
Maar hier gaat hij dus volgens mij altijd het geselecteerde een andere kleur geven. Het is de bedoeling dat dit enkel gebeurd bij de option met value="SLX"..
Toevoeging op 15/07/2011 13:22:11:
Iemand? :)