[css] How to remove border of drop down list : CSS

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.

This question is related to css

The answer is


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.


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

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.


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

Exact solution.