删除选择标签上的边框

Question

I made a form for a site and all textboxes have rounded corners except the select drop down box. I made a rounded box style and it shows but the original square also shows behind it. Is there any way I can remove this so my is the only one that shows. I'll add the code

<td>Service Requested:
      <select style="margin-left: 10px" name="service" tabindex="4">
           <option value=" " selected="selected"> </option>
           <option value="Residential Move">Residential Move*</option>
           <option value="Commercial Move">Commercial Move*</option>
           <option value="Storage Unit Loading">Storage Unit Loading</option>
           <option value="Storage Unit Unloading">Storage Unit Unloading</option>
           <option value="Furniture Consignment">Furniture Consignment</option>
           <option value="Assembly/Removal">Assembly/Removal</option>
           <option value="Landscaping">Landscaping</option>
           <option value="Cleanout">Cleanout</option>
           <option value="General Help">General Help</option>
      </select>
</td>        

and this is the entire css for the whole form. Just have at it

#searchbox {
padding-left: 190px;
padding-bottom:40px;
background: url(../images/border-dashed.gif) repeat-x left bottom;
}

#searchbox form {
margin: 0;
}

#searchbox table {
margin: 0;
}

#searchbox th, td {
text-align: left;
font-weight: normal;
color:#302f2f;
}

#searchbox .submitrow {
text-align: right;
}

#search {

}

#search input[type="text"] {
   border: 2px solid #c1c2c3 ;
   font: bold 12px Arial,Helvetica,Sans-serif;
   color: #302f2f;
   width: 100px;
   padding: 6px 15px 6px 15px;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
   text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
   -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
   -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
   -webkit-transition: all 0.7s ease 0s;
   -moz-transition: all 0.7s ease 0s;
   -o-transition: all 0.7s ease 0s;
   transition: all 0.7s ease 0s;
}

#search input[type="text"]:focus {
   width: 150px;
}

#search select {
    border: 2px solid #c1c2c3 ;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #302f2f;
    width: 200px;
    padding: 6px 15px 6px 15px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}

#search select:focus {
    width: 250px;
}

#search textarea {
    border: 2px solid #c1c2c3 ;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #302f2f;
    width: 300px;
    padding: 6px 15px 6px 15px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}

#search textarea:focus {

}


.contactwrapper {width:auto; height:200px; overflow:hidden;}
.extra-wrap {width:800px; overflow:hidden;}




.formbtn {
background: url(../images/formbtns.png) no-repeat;
background-position: 0 bottom;
color: #f1f2ea;
display: block;
line-height: 28px;
float:right;
margin-left:450px;
margin-bottom:40px;
height: 30px;
width: 100px;
margin: 48px 10px;
outline: 0;
text-align: center;
text-decoration: none;
}
.formbtn:hover {
background-position: 0 top;
}

thanks

Answer 1

The ability to style select boxes is inconsistent across browsers. Some of them respond well to CSS styling and some don't, but if you really want to have completely consistent control over it and its behavior, you need to make a faux-select that is powered by javascript.

Check out the Select2 control , it's nice.

Answer 2

Styling to a select box is chosen mostly by the browser and is not very customizable without javascript besides using a background image.

Since jQuery UI 1.8 there has been an autocomplete control that has a combobox functionality which replaces a select control.

Answer 3

I found an alternative, but not sure how it will behave with all browsers. But if you change the border property to inherit it will do it. At least in Chrome

border: 2px inherit #c1c2c3 ;