CODEWITHSUNDEEP
cssdrop-down-menustylesheet
BradG
BradG

Reputation: 740

How to change the style of the arrow in a select box using css

May I have a little help with styling a select box with a nice looking arrow image? I have tried several combinations but cannot get the default arrow hidden while displaying the .png one.

This is what I need help with:

enter image description here

Here is the CSS:

ul > li.sel_con
{
    float:none;
    list-style:none;
    width:215px;
    border:1px solid #cfcfcf;
    height:auto;
    border-radius:5px;
    background-color:#FFF;
     -moz-box-shadow:    inset 0 0 5px #CCC;
   -webkit-box-shadow: inset 0 0 5px #CCC;
   box-shadow:         inset 0 0 5px #CCC;
   padding:6px 0 6px 02px;
    position:relative;
    z-index:0;
    behavior: url(pie/PIE.htc);

}

ul > li > select
{
    width:207px;
    border:none;
    background-color:transparent;
    outline:none;
    background: url(http://i57.tinypic.com/nnmgpy_th.png) no-repeat right ;


}

Here is a fiddle of the current CSS and HTML, any suggestions will be appreciated:

http://jsfiddle.net/pazzesco/c0qgggab/1/

Upvotes: 0

Views: 850

Answers (2)

BradG
BradG

Reputation: 740

Ok, finally this is what I did, tested and works in IE, Mozilla and Chrome, as well as Android.

Providing only the changed code:

ul > li > select
{
    width:110%;
    background: url(http://i57.tinypic.com/nnmgpy_th.png) no-repeat right ;
    background-position: 87%;
}

and also 

ul > li.sel_con
{
overflow:hidden;
}

Upvotes: 0

Todd Mark
Todd Mark

Reputation: 1885

ul > li > select
{
    width:207px;
    border:none;
    background-color:transparent;
    outline:none;
    background: url(http://i57.tinypic.com/nnmgpy_th.png) no-repeat right ;
    -webkit-appearance: none;
    -moz-appearance:none; 
}

change these code, you will be achieve it. Here is a JSFiddle.

Upvotes: 1

Related Questions