0

Here is the drop down menu I am working on.

<select id="frames" onchange="updateDisplay()" class="styled-select"> <OPTION value="ravi">ravi</OPTION> <OPTION value="steve">steve</OPTION> <OPTION value="robert">robert</OPTION> </select>​

and the css

select { background-color:#232323; border-color:#232323; border-width:1px; color:white; };​

http://jsfiddle.net/ravi007/ZWwgW/3/

I am trying to add a grey back ground to drop down menu. I am partly successful.

I failed to add grey color to small button with arrow. I also want to make that arrow to white.

I am seeing a default yellow border around drop down when I click. Is there a way to make it blue

When googled I noticed that button part is related to browser.

Thanks

Improve this question

3 Answers 3

Reset to default
1

You can't change the arrow but you can make it look like its changed with an Image.

Here is a simple trick, Have a look at this Example

Not Exactly what you want, but helpful.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

You have to add the background to the LI elements as well. This is only an issue in certain browsers IIRC. 

select, select > option { background-color:#232323; border-color:#232323; border-width:1px; color:white; }

Demo

As for the 'border' colour - are you sure this is not the 'outline'?? have you tried changing outline-color: blue; ? Demo with outline.

Here is the difference with the LI's getting the background color in Chrome on Linux (Ubuntu) http://jsfiddle.net/rlemon/ZWwgW/7/
enter image description here

Improve this answer

4 Comments

outline-color is what i am looking for. Thanks. Regarding adding the grey color to small box with arrow, and making the arrow white, I dont see any difference in your demo even after adding background to list elements.
makes a difference on my browser. I'll add a screenie. Like I said this is browser specific.
Thanks.hmmm unfortunately it is not working on windows chrome. :( . What about the little arrow. Is there a option to turn it to white.
not that I am aware of. But like people keep suggesting, the best solution here to ensure 100% cross browser compatibility and consistency would be to mask the control with a custom dropdown (select) menu.
0

Sadly, you won't be able to change that arrow with CSS, because it is rendered by the browser you are using. The only thing I can think of is to use this JQuery Library (example)

And for the border I think you will be able to access it like this (this border is only rendered by some browsers like safari):

select::-moz-focus-inner { border-color: blue; }

and if you are talking about the outline, you can simply do:

select{ outline-color: blue; }
Improve this answer

1 Comment

IIRC the 'yellow' he is talking about is not a border, but in fact an outline.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.