0

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/

BradG
  • 673
  • 1
  • 14
  • 26
  • possible duplicate of [CSS Select box arrow style](http://stackoverflow.com/questions/12668404/css-select-box-arrow-style) – web-tiki Nov 12 '14 at 13:30
  • 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 Nov 12 '14 at 13:48

2 Answers2

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.

Todd Mark
  • 1,847
  • 13
  • 25
  • thank you for the answer, unfortunately I still see the ugly looking default arrow both in IE and Mozilla – BradG Nov 12 '14 at 13:45
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;
}
BradG
  • 673
  • 1
  • 14
  • 26