Oscar Peace
Oscar Peace

Reputation: 99

Get rid of <select> grey border in chrome

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.

Upvotes: 2

Views: 440

Answers (1)

dom_ahdigital
dom_ahdigital

Reputation: 1681

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>

Upvotes: 1

Related Questions