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

Question

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/

I have tried several of those solutions but neither of those work for my code, this is why I am requesting advice for this particular case. — BradG
– BradG, Commented Nov 12, 2014 at 13:48

Todd Mark · Accepted Answer · 2014-11-12 13:40:30Z

1

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.

answered Nov 12, 2014 at 13:40

Todd Mark

1,88513 silver badges25 bronze badges

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

1 Comment

BradG Over a year ago

thank you for the answer, unfortunately I still see the ugly looking default arrow both in IE and Mozilla

BradG · Accepted Answer · 2014-11-12 17:09:32Z

0

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

answered Nov 12, 2014 at 17:09

BradG

7483 gold badges16 silver badges32 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related