摆脱 chrome 中的 <select> 灰色边框答案

【问题标题】：Get rid of <select> grey border in chrome摆脱 chrome 中的 <select> 灰色边框
【发布时间】：2017-12-13 04:02:12
【问题描述】：

我的选择元素只有底部边框，但出现了一个灰色边框，我无法摆脱它。

CSS：

select {

width: 100px;
padding: 10px;
border-bottom: 2px solid white;
background-color: black;
color: white;
outline: none;   

}

截图 what it looks like。（灰色边框）

对于这个问题的任何帮助将不胜感激。

【问题讨论】：

Selects 很难被 CSS 编辑。不是跨浏览器。
^ 不代表做不到。
How to style a <select> dropdown with CSS only without JavaScript?的可能重复
@OscarPeace：移除顶部、左侧和右侧边框。默认情况下它们在那里。
enter link description here在这里你可以找到答案兄弟）

标签： html css google-chrome

【解决方案1】：

像这样：

body {
  background: #000;
}

select {
  width: 100px;
  padding: 10px;
  border-width: 0;
  border-bottom: 2px solid white;
  background-color: black;
  color: white;
  outline: none;
}

<select>
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
 </select>

【讨论】：