How to remove border of drop down list : CSS - 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.

Answer 1

You can't style the drop down box itself, only the input field. The box is rendered by the operating system.
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;
}

Answer 2

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

Answer 3

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.

Answer 4

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.