Удаление закругленных углов из элемента <select> в Chrome/Webkit

Таблица стилей пользователя-агента для Chrome дает граничный радиус 5 пикселей для всех углов элемента <select>. Я попытался избавиться от этого, применив радиус 0px через мою внешнюю таблицу стилей, а также встроенный в сам элемент; Я пробовал как border-radius:0px, так и -webkit-border-radius:0px;, и я попробовал еще более конкретный border-top-left-radius:0px (вместе с ним - эквивалент -webkit).

Не работают.

Когда я исследую элемент в инструментах разработчика webkit, Computed Style по-прежнему отображает радиус как 5px. Но если щелкнуть стрелку расширителя рядом с ней, чтобы увидеть специфику, она читает: element.style - 0px. И ниже это показывает внешнюю спецификацию css, которую я дал 0px, а также спецификацию стилей пользовательского агента 5px. И обе эти последние два вычеркнуты, как и должно быть.

Любые идеи?

Ответ 1

Это работает для меня (стили первый вид не выпадающий список):

select {
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
}

http://jsfiddle.net/fMuPt/

Ответ 2

Просто мое решение с выпадающим изображением (inline svg)

select.form-control {
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='#444' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>");
    background-position: 100% 50%;
    background-repeat: no-repeat;
}

Альтернатива (поскольку вышеупомянутый не работает с последним firefox)

select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-border-radius: 0px;
    background-image: url("https://image.flaticon.com/icons/svg/60/60781.svg");
    background-position: 99% 50%;
    background-repeat: no-repeat;
    background-size: 16px;
}

Я использую bootstrap, поэтому я использовал select.form-control
Вместо этого вы можете использовать select{ или select.your-custom-class{.

Ответ 3

Если вы хотите квадратные границы и все еще хотите стрелку маленького расширителя, я рекомендую следующее:

select.squarecorners{
     border: 0;
     outline: 1px solid #CCC;
     background-color: white;
}

Ответ 4

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

Мое решение состояло в том, чтобы просто поместить белый div (с граничным радиусом: 0px) за выделение. Установите его положение на абсолютное, его высоту на высоту выделения, и вам должно быть хорошо идти!

Ответ 5

Некоторые хорошие решения здесь, но для этого не нужен SVG, он сохраняет границу через outline и устанавливает ее на кнопку.

select {
  height: 20px;
  -webkit-border-radius: 0;
  border: 0;
  outline: 1px solid #ccc;
  outline-offset: -1px;
}

<select>
 <option>Apple</option>
 <option>Ball</option>
 <option>Cat</option>
</select>

Ответ 6

Вставка теневого окна делает трюк.

select{
  -webkit-appearance: none;
  box-shadow: inset 0px 0px 0px 4px;
  border-radius: 0px;
  border: none;
  padding:20px 150px 20px 10px;
}

Демо

Ответ 7

По какой-то причине на самом деле это повлияло на цвет границы??? Когда вы используете стандартный цвет, углы остаются округлыми, но если вы слегка меняете цвет, округление уходит.

select.regularcolor {
    border-color: rgb(169, 169, 169);
}

select.offcolor {
    border-color: rgb(170, 170, 170);
}

https://jsfiddle.net/hLg70o70/2/

Ответ 8

Ну, я получил решение. надеюсь, это может помочь вам:)

select{
      border-image: url(http://www.w3schools.com/cssref/border.png) 30 stretch;
      width: 120px;
      height: 36px;
      color: #999;
  }

<select>
  <option value="1">Hi</option>
  <option value="2">Bye</option>
</select>

Ответ 9

Следует избегать устранения стрелок. Решение, которое сохраняет стрелки раскрывающегося списка, - это сначала удалить стили из раскрывающегося списка:

.myDropdown {
  background-color: #yourbg;
  border-style: none;
}

Затем создайте div непосредственно перед выпадающим списком в вашем HTML:

<div class="myDiv"></div>
<select class="myDropdown...">...</select>

И стиль div как это:

.myDiv {
  background-color: #yourbg;
  border-style: none;
  position: absolute;
  display: inline;
  border: 1px solid #acolor;
}

Дисплей inline будет держать div от перехода на новую строку, абсолютная позиция удаляет его из потока страницы. Конечный результат - это приятное чистое подчеркивание, которое вы можете стилизовать по своему желанию, а выпадающее меню по-прежнему ведет себя так, как ожидал пользователь.

Ответ 10

firefox: 18

.squaredcorners {
    -moz-appearance: none;
}

Ответ 11

Задайте CSS как

border-radius:0px !important
-webkit-border-radius:0px !important
border-top-left-radius:0px !important

Попробуйте, если он работает.