CODEWITHSUNDEEP
htmlcss
javaMan
javaMan

Reputation: 6680

customizing drop down menu

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

Upvotes: 0

Views: 1853

Answers (3)

rlemon
rlemon

Reputation: 17667

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

Upvotes: 1

ygssoni
ygssoni

Reputation: 7359

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.

Upvotes: 1

TrizZz
TrizZz

Reputation: 1200

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

Upvotes: 0

Related Questions