如何删除下拉列表的边框：CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14639638/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove border of drop down list : CSS
提问by Manjit Singh
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.
但对我不起作用。
回答by thordarson
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.
如果您想更好地控制输入字段的外观，您可以随时查看JavaScript 解决方案。
If, however, your intent was to remove the border from the input itself, your selector is wrong. Try this instead:
但是，如果您的意图是从输入本身中删除边框，那么您的选择器是错误的。试试这个：
select#xyz {
border: none;
}
回答by thordarson
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;
}
回答by Rohit Dhore
select#xyz {
border:0px;
outline:0px;
}
Exact solution.
确切的解决方案。
回答by Юрий Стражнов
This solution seems not working for me.
这个解决方案似乎对我不起作用。
select {
border: 0px;
outline: 0px;
}
But you may set selectborder to the background color of the container and it will work.
但是您可以将select边框设置为容器的背景颜色，它会起作用。
回答by Syed Muhammad Wasiq Saleem
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.
由于下拉列表边框是不可编辑的，因此您无法对其进行任何操作，但这肯定会修复您的初始外观。
