An Easy Way to Build Replacement Combo Boxes - Styling the Text Input Field
(Page 3 of 4 )
So now both of the most popular versions of IE are behaving. Next we can style the text input field:
.combo {
height:20px;
width:140px;
color:#000000;
border-style:solid;
border-width:1px 0px 1px 1px;
border-color:blue;
margin:0px;
padding:0px;
vertical-align:bottom;
}
The height is set to the same as the image and the width is long enough to display each of the options in full. It is given the same border values, with the exception of missing off the right-hand border, as this will be flush with the image anyway. The div containing the options will need to be hidden for now, and will only be shown when the drop-down arrow image is clicked (exactly like a standard combo box). This CSS for this would be as follows:
#combodiv {
padding:0px;
display:none;
position:relative;
left:151px;
height:150px;
width:120px;
border-style:solid;
border-width:0px 1px 1px 1px;
border-color:blue;
background-color:white;
overflow-y:auto;
overflow-x:hidden;
}
The rule display:none ensures that the div is initially hidden from view. Everything else should make sense without explanation, but I feel I should add that the overflow rules break the validity of the CSS. The overflow rule alone is fine, but specifying x and y is not; however, without these rules, FireFox and IE will display a horizontal scroll bar as well as a vertical scroll bar, which frankly ruins the appearance completely.
One way around this would be to not have any scroll bars at all (by specifying overflow:hidden). The good thing about the vertical scroll bar is that we don't need to adjust the height of the options div if there are more than about six options. The bad thing is that we end up with another element that can't be consistently styled across browser platforms. However, vertical scroll bars shouldn't really be styled at all anyway, and the scroll bar is only visible while the options div is open. I'll leave it up to you to decide whether to use the non-valid CSS and user friendly scroll bar, or valid CSS with no scroll bar. Finally, we can add some styling to the options themselves:
.option {
display:block;
text-decoration:none;
font-family:arial, sans-serif;
color:#000000;
width:100%;
}
.option:hover {
background-color:blue;
}
So what do we have here? Nothing much in all honesty! The options are links, so they need to have their underlining removed (as they aren't functioning as traditional links would). The display:block rule lays the options out nicely so that they appear more like an unordered list. Without this, the elements follow each other one after the other. Setting the width to 100% is used more in the hover psuedoclass rule and ensures that the colored background, which marks the rollover, stretches the full width of the div. Save the file as combo.css.
Next: Adding JavaScript >>
More Style Sheets Articles
More By Dan Wellman
