Ray's Test Pages - Simple Drop Down Menu

It is possible to change certain aspects of a dropdown list box appearance.

The code for the drop down box above is ...

<form>
<p align="center">
<select onChange="location=this.options[this.selectedIndex].value;">
<option value="http://brisray.com/index.html">Home</option>
<option value="http://brisray.com/bristol/bind.htm">Bristol</option>
<option value="http://brisray.com/optill/oind.htm">Optical Illusions</option>
<option value="http://brisray.com/dad/dind.htm">Royal Navy</option>
</select></p>
</form>

The entire background colour and font can be changed by putting a style into the select statement. If you have the font installed, the text in the dropdown list box should be in Comic Sans MS. This works on Windows with IE v6, Mozilla v1.4, Netscape 7.1 and Opera v7.11

The code for the above dropdown list box is ...

<form><p align="center">
<select style="background-color:#FF0000;font-family: Comic Sans MS;font-size: 16pt"; onChange="location=this.options[this.selectedIndex].value;"">
<option value="http://brisray.com/index.html">Home</option>
<option value="http://brisray.com/bristol/bind.htm">Bristol</option>
<option value="http://brisray.com/optill/oind.htm">Optical Illusions</option>
<option value="http://brisray.com/dad/dind.htm">Royal Navy</option>
</select></p>
</form>

It is possible to change the colour of each option by using "style" inside the option. This does not work in Opera v7.11

The code for the above dropdown is ...

<form>
<p align="center">
<select onChange="location=this.options[this.selectedIndex].value;">
<option value="http://brisray.com/index.html" style="background-color:#FFFFFF;">Home</option>
<option value="http://brisray.com/bristol/bind.htm" style="background-color:#FFB6C1;">Bristol</option>
<option value="http://brisray.com/optill/oind.htm" style="background-color:#FF69B4;">Optical Illusions</option>
<option value="http://brisray.com/dad/dind.htm" style="background-color:#FF0000;">Royal Navy</option>
</select></p>
</form>

If you want to user to click on a button to go to the chosen URL use the following code

The code for the above dropdown is ...

<form>
<p align="center">
<select name="menu">
<option value="http://brisray.com/index.html">Home</option>
<option value="http://brisray.com/bristol/bind.htm">Bristol</option>
<option value="http://brisray.com/optill/oind.htm">Optical Illusions</option>
<option value="http://brisray.com/dad/dind.htm">Royal Navy</option>
</select>
<input type="button" onClick="location=this.form.menu.options[this.form.menu.selectedIndex].value;" value="GO">
</p>
</form>

 

Images - the page where the best of the image selection code ends up

Test Page - where most of the testing is done

Colours - Page 2 - page for testing CSS and other groupings

Other Websites

Webtek Systems - what my site (or anybody else's) must NOT look like

This page created 9th January 2004


GoStats stats counter