[HTML] Verschillende opmaak van rijen in een combobox

Pagina: 1
Acties:

  • Pascal Saul
  • Registratie: Augustus 2001
  • Laatst online: 07-07-2025
Ik wil dus een combobox maken waarin je de fontsize kunt selecteren met daarbij een voorbeeld.

Het voorbeeld hieronder werkt wel in FireFox maar helaas niet in IE :?
Iemand nog een andere oplossing?

code:
1
2
3
4
5
6
<select size="1" name="font-size">
  <option style="font-size: 8pt">8pt</option>
  <option style="font-size: 10pt">10pt</option>
  <option style="font-size: 12pt">12pt</option>
  <option style="font-size: 14pt">14pt</option>
</select>

De lettertypen kunnen het ook niet :(

code:
1
2
3
4
5
<select size="1" name="font-face">
  <option style="font-family: Arial">Arial</option>
  <option style="font-family: Terminal">Terminal</option>
  <option style="font-family: Comic Sans MS">Comic Sans MS</option>
</select>

Kleur dan wel weer :7

code:
1
2
3
4
5
<select size="1" name="color">
  <option style="color: red">Rood</option>
  <option style="color: green">Groen</option>
  <option style="color: blue">Blauw</option>
</select>

Tekstdecoratie ook weer niet :O

code:
1
2
3
4
5
<select size="1" name="text-decoration">
  <option style="text-decoration: overline">Lijn boven</option>
  <option style="text-decoration: underline">Onderstrepen</option>
  <option style="text-decoration: line-through">Doorhalen</option>
</select>


Misschien is dit topic nog handig als naslagwerk of voor de search 8)7

[ Voor 76% gewijzigd door Pascal Saul op 12-07-2005 01:04 ]


  • André
  • Registratie: Maart 2002
  • Laatst online: 04-05 16:01

André

Analytics dude

In IE kun je dit alleen oplossen door een DHTML pulldown. Ik heb even wat lopen testen met een paar zaken maar sowieso kun je de options qua style niet aanpassen. En met een onmouseover kun je ook geen voorbeeldje naast de pulldown creeren aangezien dat alleen maar in FF werkt :)

Eventueel niet realtime maar met een onclick kan ook:

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript">
  function doe(obj)
  {
    ex = document.getElementById("pas_example");
    tx = obj.options[obj.selectedIndex].text
        
    ex.innerHTML = tx;
    ex.style.fontSize = tx;
  }
</script>

<select size="1" name="fontsize" onclick="doe(this)">
  <option style="font-size: 8pt">8pt</option>
  <option style="font-size: 10pt">10pt</option>
  <option style="font-size: 12pt">12pt</option>
  <option style="font-size: 14pt">14pt</option>
</select>
<span id="pas_example"></span>




Het komt er op neer dat IE de CSS van de select control van het OS niet goed geimplementeerd heeft :)

[ Voor 71% gewijzigd door André op 12-07-2005 01:16 ]