Aanpassen kleur in dropdown menu

[Rolf Veenhuizen]

Ik wil graag in het volgende dopdown menu de kleur van de knop veranderen, waar en hoe met ik de onderstaande code dan aanpassen?

Alvast bedankt!

In de head sectie staat:

<script language="javascript" type="text/javascript" >
<!-- hide

function jumpto(x){

if (document.form1.jumpmenu.value != "null") {
document.location.href = x
}
}

// end hide -->
</script>

en in de body sectie:

<form name="form1">
<font face="Arial" size="2">
<select name="jumpmenu" onChange="jumpto(document.form1.jumpmenu.options[document.form1.jumpmenu.options.selectedIndex].value)">
<option>Ga naar ...</option>
<option value="http://www.deharpij.nl/dierentuin/persberichten/dierentuinnieuws-januari2007.htm">Persberichten
januari</option>
<option value="http://www.deharpij.nl/dierentuin/persberichten/dierentuinnieuws-februari2007.htm">Persberichten
februari</option>
<option value="http://www.deharpij.nl/dierentuin/persberichten/dierentuinnieuws-maart2007.htm">Persberichten
maart</option>
<option value="http://www.deharpij.nl/dierentuin/persberichten/dierentuinnieuws-april2007.htm">Persberichten
april</option>


</font>

</form>

 

[Egel]

Dat kan met een style in de select:

<script language="javascript" type="text/javascript" >
<!-- hide

function jumpto(x) {
 if (x != '') {
  document.location.href = x
  };
 };

// end hide -->
</script>

en in de body sectie:

<form name="form1">
<font face="Arial" size="2">
<select style="background: #c00; color: #fff; font: 13 px 'Courier new';" name="jumpmenu" onChange="jumpto(document.form1.jumpmenu.options[document.form1.jumpmenu.options.selectedIndex].value)">
<option value="">Ga naar ...</option>
<option value="http://www.deharpij.nl/dierentuin/persberichten/dierentuinnieuws-januari2007.htm">Persberichten
januari</option>
<option value="http://www.deharpij.nl/dierentuin/persberichten/dierentuinnieuws-februari2007.htm">Persberichten
februari</option>
<option value="http://www.deharpij.nl/dierentuin/persberichten/dierentuinnieuws-maart2007.htm">Persberichten
maart</option>
<option value="http://www.deharpij.nl/dierentuin/persberichten/dierentuinnieuws-april2007.htm">Persberichten
april</option>
</select>
</form>


</font>

</form>

zo krijg je een rode achtergrond, witte letters en Courier New.

(Ik heb het script ook nog iets verbeterd en twee tags afgesloten. )


Vr.Gr. Egel.

 

[Rolf Veenhuizen]

Bedankt voor je reactie. Deze aanpassing was precies wat ik wilde weten. Alleen als ik dit script kopieer werkt hij niet, terwijl het oude script wel werkte.

Doe ik iets fout of staat er in het script iets niet goed?

 

[Egel]

Dit zou het goed moeten doen:

<script type="text/javascript">
<!-- hide

function jumpto(x) {
 if (x != '') {
  document.location.href = x;
  };
 };

// end hide -->
</script>


<form>
<select style="background: #c00; color: #fff; font: 13 px 'Courier new';" onChange="jumpto(this.options[this.options.selectedIndex].value)">
<option value="">Ga naar ...</option>
<option value="http://www.deharpij.nl/dierentuin/persberichten/dierentuinnieuws-januari2007.htm">Persberichten
januari</option>
<option value="http://www.deharpij.nl/dierentuin/persberichten/dierentuinnieuws-februari2007.htm">Persberichten
februari</option>
<option value="http://www.deharpij.nl/dierentuin/persberichten/dierentuinnieuws-maart2007.htm">Persberichten
maart</option>
<option value="http://www.deharpij.nl/dierentuin/persberichten/dierentuinnieuws-april2007.htm">Persberichten
april</option>
</select>
</form>

Bij de onchange is this. gebruikt, dan hebben de form en select geen name meer nodig.


Vr.Gr. Egel.

 

[Rolf Veenhuizen]

Script werkt inderdaad prima! Bedankt!

Op de een of andere manier waren er tekens anders overgenomen door de computer, tijdens het knippen en plakken. Vandaar dat het script niet werkte.

 

[Rolf Veenhuizen]

Weet je toevallig ook wat ik aan het script moet toevoegen om de pijl/knop een andere kleur te geven? De knop is nu standaard grijs met een zwarte pijl.
Alvast bedankt!

 

[Egel]

Script werkt inderdaad prima! Bedankt!

Graag dedaan!

Op de een of andere manier waren er tekens anders overgenomen door de computer, tijdens het knippen en plakken. Vandaar dat het script niet werkte.

Ik had het formulier ook een keer te vaak afgesloten, misschien lag het daar aan.

Weet je toevallig ook wat ik aan het script moet toevoegen om de pijl/knop een andere kleur te geven? De knop is nu standaard grijs met een zwarte pijl.

Helaas niet, die kleur blijft zoals de browser het vormgeeft, bij een radio-button gebeurt iets dergelijks.

text-vakjes kun je wel weer helemaal vormgeven, met bv. border: 1px solid #000; in de style krijg je een zwart randje van één pixel.


Vr.Gr. Egel.

 

[Rolf Veenhuizen]

Bedankt voor alle informatie!! :thumb: