1 reply [Last post]
Mount Shasta, CA
Last seen: 18 years 46 weeks ago
Mount Shasta, CA
Joined: 2004-01-16
Posts: 1
Points: 0

Hi, folks,

I'm working on a project, using an existing stylesheet, and I've made a form. On this form, where I have "<input ...>" items (ie: text boxes), the boxes are nicely colored along with the rest of the page.

But wherever I use a "<select ...>" item (ie: a drop-down box), the drop-down box field and the down-arrow are standard gray, and not colored nicely at all.

The stylesheet appears to have style definitions both for "input" and for "select". Here's what it contains ...


input {
font: 100% Verdana, Helvetica, Arial, sans-serif;
border: 1px solid #900000;
color: Black;
background-color: white;
vertical-align: middle;
margin-bottom: 1px; /* IE bug fix */
padding: 0.1em;

select {
font: 100% Verdana, Helvetica, Arial, sans-serif;
border: 1px solid #900000;
vertical-align: top;

Using my handy-dandy TopStyle Pro program, I've tried tweaking everything I could think of in the "select" definition, and adding border this and border that. However, nothing I add seems to make any difference in the appearance of the drop down boxes.

Anybody here know how to get the border and the arrow of a drop-down box to be a certain color, and not the standard gray? I'd also like to get rid of the "shadow" effect on the top and left edges.

Tony's picture
Last seen: 2 weeks 4 days ago
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

How to CSS-color a &quot;Drop-Down&quot; box?

Hi trakwebster,
Unfortunately how the select arrows is displayed is controlled by the browser.
I don't know of anyway to change it.