How to remove border of drop down list : CSS

Question

I want to remove the border that is coming just outside the drop down list.
I am trying:

select#xyz option {
  Border: none;
}

But does not work for me.

Have a look here http://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript — LeBen, Feb 01 '13 at 08:18
-webkit-padding-end: 0; did it for me - well at least got rid of thick black left margin that appeared on drop-down on Chrome. Be careful changing the font size of the input control as this can affect the select list menu and date calendar drop-down types on Chrome. — Philip Murphy, Nov 15 '18 at 23:32

thordarson · Answer 1 · 2013-02-01T04:31:00.947

80

You can't style the drop down box itself, only the input field. The box is rendered by the operating system.

enter image description here

If you want more control over the look of your input fields, you can always look into JavaScript solutions.

If, however, your intent was to remove the border from the input itself, your selector is wrong. Try this instead:

select#xyz {
    border: none;
}

edited Feb 01 '13 at 04:31

answered Feb 01 '13 at 04:25

thordarson

5,943
2
17
36

Thanks for the clear image, I was search some like this! I think your answer must to be accepted. – Salasar Oct 29 '15 at 08:12
The second part is rendered by os or browser, couse i have 5 browser and each show different, and unique w7 so ? – MagicHat Jan 02 '17 at 15:25
Just that you can't change it with CSS doesn't mean it's rendered by the OS. – Grant Gryczan Aug 06 '18 at 06:13
The reason the dropdown part is rendered by the OS is probably a usability one. Look at how touch based OSs render the "dropdown" (or rather the popup part in those cases) part differently from desktop OSs. Every browser and app in iOS and Android will display the same kind of option picker unless they're doing something frowned upon by design guidelines. Likewise, the transition from Windows 7 to Windows 8 and 10 saw those dropdowns grow larger to accomodate fat fingers, regardless of browsers. – thordarson Aug 14 '18 at 11:23

score 67 · Accepted Answer · edited Apr 01 '17 at 09:05

67

The most you can get is:

select#xyz {
   border:0px;
   outline:0px;
}

You cannot style it completely, but you can try something like

select#xyz {
  -webkit-appearance: button;
  -webkit-border-radius: 2px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-padding-end: 20px;
  -webkit-padding-start: 2px;
  -webkit-user-select: none;
  background-image: url(../images/select-arrow.png), 
    -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
  background-position: center right;
  background-repeat: no-repeat;
  border: 1px solid #AAA;
  color: #555;
  font-size: inherit;
  margin: 0;
  overflow: hidden;
  padding-top: 2px;
  padding-bottom: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

edited Apr 01 '17 at 09:05

Hakan Fıstık

16,800
14
110
131

answered Feb 01 '13 at 09:00

1

outline: 0px; is the key – greaterKing Jun 04 '14 at 03:47
7

"0", better than "0px;" – serge Jul 27 '16 at 15:53
@Serge "none" is better than both – Giuppox Dec 03 '20 at 13:36

score 11 · Answer 3 · edited Mar 12 '19 at 13:42

11

You could simply use:

select {
    border: none;
    outline: none;
    scroll-behavior: smooth;
}

As the drop down list border is non editable you can not do anything with that but surely this will fix your initial outlook.

edited Mar 12 '19 at 13:42

Samuel Philipp

10,631
12
36
56

answered Mar 12 '19 at 13:15

Syed Muhammad Wasiq Saleem

161
2
4

score 2 · Answer 4 · edited Jan 15 '19 at 02:04

2

This solution seems not working for me.

select {
    border: 0px;
    outline: 0px;
}

But you may set select border to the background color of the container and it will work.

edited Jan 15 '19 at 02:04

alx lark

784
1
6
21

answered Jan 14 '19 at 22:52

Юрий Стражнов

43
7

score 0 · Answer 5 · edited Jun 06 '23 at 13:38

I decided for this solution:

I set the background-color of the select element to the grey:

.participants-amount {
                        background-color: #f8f8f8;
                        padding: 5px 5px 5px 15px;
                        border: 1px solid #f8f8f8;
                    }

and I also set the border for this select element - the same color as the background.

Here is the result:

1:

How to remove border of drop down list : CSS

5 Answers5

Linked

Related