Get rid of grey border in chrome Asked Dec 12 '17 at 19:57 Active Dec 12 '17 at 20:02 Viewed 306 times 2 I only have the bottom border on my select element but a grey border shows up which I cannot get rid of. CSS: select { width: 100px; padding: 10px; border-bottom: 2px solid white; background-color: black; color: white; outline: none; } Screenshot of what it looks like. (the grey border) Any help with this problem would be greatly appreciated. html css google-chrome edited Dec 12 '17 at 20:00 Oscar Peace asked Dec 12 '17 at 19:57 Oscar Peace 99 1 2 11 `Select`s are badly editable by CSS. Not crossbrowser. – pavel Dec 12 '17 at 19:59 ^ That doesn't mean it can't be done. – Obsidian Age Dec 12 '17 at 19:59 Possible duplicate of [How to style a dropdown with CSS only without JavaScript?](https://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript) – Obsidian Age Dec 12 '17 at 20:00

Answer 1

Like this:

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>