I'm having some problems using CSS to customize the drop down menu in my form. I looked up tutorials around the web and tried some things but in the end, I still could not get it working completely.
The part that does not work is the font size and family in the drop down menu. I tried changing it to smaller fonts, bigger fonts, and other types of fonts (say Verdana), but it always ends up looking the same.
Here is my code for the form:
<form name="search" action="someaction.php" method="GET">
<select name="year">
<option value="2005">2005
<option value="2004">2004
<option value="2003">2003
<option value="2002">2002
<option value="all" selected>All
<input class="button" type="submit" value="View">
</select>
</form>
And below is the CSS that I used to change the form's look:
select {
border: 0;
background-color: #4E1866;
}
option {
font-family: verdana;
font-size: 8pt;
color=#FFFFFF;
background-color: #4E1866;
border: 0;
}
input.button {
background-color: #4E1866;
font-size: 8pt;
font-family: Verdana;
color: #FFFFFF;
border: dotted 1px #FFFFFF;
}
If someone can help me pick out my mistake or point out whatever I need to do to fix this that would be great!
Thanks in advance!It worked for me in Mozilla Firefox. However, you need to close all the <option> tags and move the <input> out of the <select> tag.
The part that does not work is the font size and family in the drop down menu. I tried changing it to smaller fonts, bigger fonts, and other types of fonts (say Verdana), but it always ends up looking the same.
Here is my code for the form:
<form name="search" action="someaction.php" method="GET">
<select name="year">
<option value="2005">2005
<option value="2004">2004
<option value="2003">2003
<option value="2002">2002
<option value="all" selected>All
<input class="button" type="submit" value="View">
</select>
</form>
And below is the CSS that I used to change the form's look:
select {
border: 0;
background-color: #4E1866;
}
option {
font-family: verdana;
font-size: 8pt;
color=#FFFFFF;
background-color: #4E1866;
border: 0;
}
input.button {
background-color: #4E1866;
font-size: 8pt;
font-family: Verdana;
color: #FFFFFF;
border: dotted 1px #FFFFFF;
}
If someone can help me pick out my mistake or point out whatever I need to do to fix this that would be great!
Thanks in advance!It worked for me in Mozilla Firefox. However, you need to close all the <option> tags and move the <input> out of the <select> tag.