How to remove all the borders of a selectbox?

Question

How can I remove the all the borders of the selectbox using css or Jquery ?

My code,

<select id="doctor_ch">
   <option value="1" selected>One</option>
   <option value="2">Two</option>
</select>

CSS

  #doctor_ch{
    background-color: #88AFF2; 
    color:#fff; 
    margin-top: 15px;
 }

When I use this code it only changes the arrow style. I want to remove the arrow background too.How can I remove it ?

Current result,

Expected result,

jsfiddle

How can I do this ?

Answer 1

Firefox has some problems with select-background. You can try this code - it'll remove the arrow, and then you can add a background image with your arrow (I took an icon from google search, just put you icon instead)

I get this on FireFox (You can use any arrow icon you want):

#doctor_ch{
    background: url('http://s4.postimg.org/5yxladijd/icon_sort_down.gif') no-repeat right #88AFF2;
    color:#fff; 
    padding-right:15px;
    margin-top: 15px;
    appearance:none;
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
 }

<select id="doctor_ch">
    <option value="1" selected>One</option>
    <option value="2">Two</option>
</select>

Answer 2

Try it

background-color: #88AFF2; color:#fff; margin-top: 15px; border:0px;