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,

enter image description here

Expected result,

enter image description here

jsfiddle

How can I do this ?

You can't do this reliably cross browser. If you want full control over the style of a select element you would need to use a plugin such as [Select2](https://select2.github.io/examples.html) — Rory McCrossan, Jun 22 '15 at 07:24
@VinodVT Now you can try to this http://jsfiddle.net/nroxs6gw/ — Rohit Azad Malik, Jun 22 '15 at 07:32
please see below: [http://stackoverflow.com/questions/5912791/how-to-remove-the-arrow-from-a-select-tag-in-firefox][1] [1]: http://stackoverflow.com/questions/5912791/how-to-remove-the-arrow-from-a-select-tag-in-firefox — Chris Hill, Jun 22 '15 at 07:32

TamarG · Accepted Answer · 2015-06-22T09:57:37.347

5

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):

enter image description here

#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>

edited Jun 22 '15 at 09:57

answered Jun 22 '15 at 07:23

TamarG

3,522
12
44
74

Thanks for your answer but the arrow image is not loaded – Vinod VT Jun 22 '15 at 09:41
Strange. But anyway it doesn't matter - just replace it with your url. I used an image of a tiny icon from the internet. – TamarG Jun 22 '15 at 09:51
I changed the icon and the URL. Maybe now you'll see it. I use FF and it works great. @VinodVT – TamarG Jun 22 '15 at 09:58
Thanks for your answer. :) – Vinod VT Jun 22 '15 at 10:10

score 1 · Answer 2 · answered Jun 22 '15 at 07:39

1

Try it

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

answered Jun 22 '15 at 07:39

Kamran

111
1

score 0 · Answer 3 · answered Jun 22 '15 at 07:26

0

You change css like this

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

and add triangle using css for #doctor_ch:after

answered Jun 22 '15 at 07:26

Maheswaran S

525
3
12

How to remove all the borders of a selectbox?

3 Answers3