customizing drop down menu - html

Question

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

Answer 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.

Answer 2

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/

Answer 3

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;
}