Question

I want a nice style for a select element on my page.
So I’ve created a css:

.selectWebDropDown
{
   background-color:Transparent;
   background: url(../Images/ddl_Normal.png) no-repeat right #FFFFFF !important;   
   border: 0px solid #FFFFFF;
   padding:4px; 
   line-height: 21px;

}

.selectWebDropDown:hover
{
  background-color:Transparent; 
  overflow: hidden;
  background: #FFFFFF url(../Images/ddl_Hover.png) no-repeat 0 0 !important; 
  padding:4px; 
  line-height: 21px;
}

.selectWebDropDown:active
{
  overflow: hidden;
  background-color:Transparent; 
  background: url(../Images/ddl_Pressed.png) no-repeat 0 0 !important; 
  padding:4px; 
  line-height: 21px;
}

The style is ok, the problem is that the arrow of the select doesn’t dissapear… Is there a way to do this without using javascript… only css

Answer 1

<select> elements are notoriously difficult to style, especially if you want cross-browser consistency. Unfortunately, I’d go the JavaScript route and make drop-down replacements using lists.

Try a jQuery plugin such as this or this.