Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Dropdown Menu Color, Font and Position

Status
Not open for further replies.

RexxSysProg

Programmer
Jul 2, 2004
205
US
I have a dropdown menu that I want to append to the end (far right) of a mouseover table. I want it to have the same colors as the table. I am able to change the background color of the dropdown to match the background color of the table. But I cannot change the background color of the dropdown “arrow” nor the color of the actual arrow to match the table text color.
I can change the text color and background color of the dropdown menu text but I cannot seem to get the dropdwon text to have the right font, nor to get it to be bold, nor to get the right color for the dropdown border.

(1) How can I get the dropdown arrow color and the arrow background color that I need?
(2) How can I position the dropdown menu to be on the same line as the table (appended to it)?
(3) How can I get the border colors around the dropdown menu to match the border size and color

border-width: 1px;
border-spacing: ;
border-style: solid;
border-color: firebrick;


that is around the table?


Code:
 <script language="JavaScript">
<!-- 
function goToURL(form)
  {
    var myindex=form.dropdownmenu.selectedIndex
    if(!myindex=="")
      {
        window.location.href=form.dropdownmenu.options[myindex].value;
      }
}
//-->
</script>

<style type="text/css">
.Dropmenucolor {background-color: "#d3d3d3"; color: "firebrick"; font: bold; FONT-FAMILY: "Times New Roman";}
</style>
<Body...>
.........
<form name="Links" >
<select style="width:50px" border-left: 1px solid "firebrick"; 
border-right: 1px solid "firebrick"; border-top: 1px solid "firebrick"; 
border-bottom: 1px solid "firebrick";
 class="inputcolor" name="dropdownmenu" size=1 onChange="goToURL(this.form)"><option selected value="">
Links</option>
<option value="[URL unfurl="true"]http://www.somepageABC.com">[/URL]
PageABC</option>
<option value=" [URL unfurl="true"]http://www.somepageDEF.com[/URL] ">
PageDEF </option>
</select></form></FORM>
 
Quoting the color name in the css declaration will clearly not help. That is not supported.

Other than that, you have two closing form tags, which is invalid, since forms cannot be nested (and yours seem to be nested).

Finally, select boxes are OS controls within the web page and as such, most of its rendering is OS and browser dependant. While you might be able to have them accept colors and border styles it is generally not going to change in the majority of the browsers.

You will probably be able to position your dropdown where you want it, but if you don't tell us how your table is positioned, we can only dream of thinking how it relates to the position of the dropdown.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top