Как удалить все границы выбора?

Question

Как я могу удалить все границы selectbox с помощью css или Jquery?

Мой код,

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

Когда я использую этот код он только меняет стиль стрелки. Я также хочу удалить фокус стрелки. Как его удалить?

Текущий результат,

Ожидаемый результат,

jsfiddle

Как я могу это сделать?

Answer 1

У Firefox есть некоторые проблемы с выделенным фоном. Вы можете попробовать этот код - он удалит стрелку, а затем вы можете добавить фоновое изображение со своей стрелкой (я взял значок из поиска в Google, просто поставлю вам значок)

Я получаю это на FireFox (You можно использовать любой значок стрелки вы хотите):

#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

вы можете изменить CSS, как это

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

и добавить треугольник с помощью CSS для #doctor_ch: после

Answer 3

Попробуйте

цвет фона: # 88AFF2; цвет: #fff; margin-top: 15px; border: 0px;