Как удалить границу выпадающего списка: CSS

Я хочу удалить границу, которая выходит за пределы выпадающего списка.
Я пытаюсь:

select#xyz option {
  Border: none;
}

Но не работает для меня.

Ответ 1

Самое большее, что вы можете получить, это:

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

Ответ 2

Вы не можете самостоятельно создать раскрывающееся окно, а только поле ввода. Ящик отображается операционной системой.

Если вы хотите больше контролировать внешний вид полей ввода, вы всегда можете посмотреть JavaScript-решения.

Если, однако, ваша цель состояла в том, чтобы удалить границу с самого входа, ваш селектор ошибочен. Вместо этого попробуйте:

select#xyz {
    border: none;
}

Ответ 3

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

Точное решение.