如何去掉下拉列表的边框：CSS

Question

我想要消除下拉列表外部出现的边框。
我尝试了：

select#xyz option {
  Border: none;
}

但这对我没有用。

- Manjit Singh

---

请看这里：https://dev59.com/YXI-5IYBdhLWcg3wW3Cp - LeBen

-webkit-padding-end: 0; 对我很有用 - 至少消除了在Chrome上下拉菜单出现的厚黑色左边距。注意更改输入控件的字体大小可能会影响Chrome上的选择列表菜单和日期日历下拉类型。 - Philip Murphy

Answer 1

你无法对下拉菜单本身进行样式设置，只能对输入字段进行样式设置。该框由操作系统渲染。

如果您希望更多地控制输入字段的外观，可以考虑使用JavaScript解决方案。

然而，如果您的意图是从输入字段中删除边框，则您的选择器是错误的。请尝试使用以下选择器：

select#xyz {
    border: none;
}

- thordarson

---

谢谢您提供清晰的图片，我一直在寻找这样的图片！我认为您的答案应该被接受。 - Salasar

第二部分由操作系统或浏览器呈现，因为我有5个浏览器，每个浏览器都显示不同的唯一W7，所以呢？ - MagicHat

仅因为您无法使用CSS更改它，这并不意味着它由操作系统渲染。 - Grant Gryczan

下拉菜单部分由操作系统渲染的原因可能是出于可用性考虑。看看基于触摸的操作系统如何从桌面操作系统中不同地呈现“下拉菜单”（或在这些情况下弹出部分）。除非它们违反设计指南，否则iOS和Android中的每个浏览器和应用程序都将显示相同类型的选项选择器。同样，从Windows 7到Windows 8和10的转换使得那些下拉菜单变得更大以适应粗手指，而不管浏览器如何。 - thordarson

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

- user1761123

---

轮廓：0px; 是关键 - greaterKing

"0"比"0px;"更好。 - serge

@Serge，“none”比两者都更好。 - Giuppox

Answer 3

你可以简单地使用：

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

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

- Syed Muhammad Wasiq Saleem

Answer 4

这个解决方案对我似乎没有用。

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

但是你可以将 select 元素的边框设置成容器的背景色，这样它就能正常使用了。

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

Answer 5

我决定采用这个解决方案：

我将选择元素的背景颜色设置为灰色：

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

我还为这个选择元素设置了边框 - 边框颜色与背景相同。

以下是结果： 1：

- Sergej Veit