How to Create a Drop-Down Box With Color
A drop-down menu is an easy way to implement multiple navigational links on a website in a small space. However, the default menu will take on the appearance of the user's browser or computer theme, and this may clash with your website design. You can customize the background and text colors of your drop-down box to match your website. The result is a more uniform website that appears fully customized to your visitors.
Other People Are Reading
Instructions
-
-
1
Open an HTML editor, such as Notepad or Textpad.
-
2
Click on the "File" menu and choose "Open" to locate an existing Web page where you wish to add the drop-down menu or choose "New" to create a new file.
-
-
3
Enter the following code where you wish your drop-down menu to appear:
<form name="form1">
<select name="select1" style="background-color:#FFFFD7" onChange="displaydesc(document.form1.select1, thetext1, 'textcontainer1')">
<option selected value="URL">Link Text </option>
<option value="URL">Link Text</option>
<option value="URL">Link Text</option>
</select>
<input type="button" value="Go"
onClick="jumptolink(document.form1.select1)">
</form>
-
4
Change "#FFFFD7" to the background color of your choice using a six-digit hex code or a Web safe color name such as "blue."
-
5
Change each instance of "URL" to an actual website address and modify "Link Text" to include descriptive text in your pull-down menu.
-
6
Add entries by using this format:
<option value="URL">Link Text</option>
You can also remove entries by removing the entire line that begins with "<option."
-
7
Click "File" and choose "Save" to save. If creating a new file, save it as an HTML file by choosing "All Files" and typing a file name, followed by ".html".
-
1
Tips & Warnings
You can add a blank line in the menu by inserting this code: <option></option>
You can apply a text color to the list as well. For example, the second line of code might read as follows to create white text on a black background:
<select name="select1" style="background-color:black; color: white" onChange="displaydesc(document.form1.select1, thetext1, 'textcontainer1')">
