css - 如何删除下拉列表的边框：CSS

Question

我想删除下拉列表之外的边框。
我在尝试：

select#xyz option {
  Border: none;
}

但对我不起作用。

Answer 1

您不能设置下拉框本身的样式，只能设置输入字段。该框由操作系统呈现。

如果您想更好地控制输入字段的外观，您可以随时查看JavaScript 解决方案。

但是，如果您的意图是从输入本身中删除边框，那么您的选择器是错误的。试试这个：

select#xyz {
    border: none;
}

Answer 2

你能得到的最多是：

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

你不能完全设置它的样式，但你可以尝试类似的东西

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

你可以简单地使用：

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

由于下拉列表边框不可编辑，因此您无法对其进行任何操作，但这肯定会修复您的初始前景。

Answer 4

这个解决方案似乎对我不起作用。

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

但是您可以将select边框设置为容器的背景颜色，它会起作用。