我想刪除下拉列表外的邊框。 我在努力:

select#xyz option {
  Border: none;
}

但對我不起作用。

您不能設置下拉框本身的樣式，只能設置輸入字段的樣式。該框由操作系統呈現。

如果您希望對輸入字段的外觀有更多的控制，您可以隨時查看JavaScript解決方案。

但是，如果您的意圖是從輸入本身移除邊框，那么您的選擇器就是錯誤的。請嘗試以下方法:

select#xyz {
    border: none;
}

你最多能得到的是:

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

您可以簡單地使用:

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

由于下拉列表的邊框是不可編輯的，你不能做任何事情，但這肯定會修復你的初始外觀。

這個解決方案似乎不適合我。

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

但是你可以將選擇邊框設置為容器的背景色，這樣就可以了。

我決定采用這個解決方案:

我將選擇元素的背景色設置為灰色:

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

我還為這個選擇元素設置了邊框——與背景顏色相同。

結果如下:

1: