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

143

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

Никто не работает.

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

Любые идеи?

select webkit css

— maxedison
источник

Не могли бы вы также опубликовать код? Еще лучше, если вы разместите его с помощью jsfiddle.net.

— ngen

1

У меня на самом деле нет границ границ в качестве стиля по умолчанию в Chrome 10 на Win7, может быть, это другая версия или ОС?

— Уэсли Мёрч

Никаких закругленных углов в Chrome 12 на Windows 7 тоже нет.

— andyb

1

Надо было упомянуть, что это на Mac OS X.

— Maxedison

244

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

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

http://jsfiddle.net/fMuPt/

— antonj
источник

179

Любой способ убрать закругленные углы, но держать стрелки справа?

— Адам

3

вам нужно добавить стрелки, например, как фоновое изображение с позицией 100% 50% и атрибутом без повторов. Я также использовал изображение в кодировке base64 в css, чтобы избежать дополнительных http-запросов.

— Карл Адлер

26

@ Adam Это сработало для меня, если вы используете border: 0и добавляете план, как:outline: 1px inset black; outline-offset:-1px

— Филипе Перейра

1

@FilipePereira Хорошо, мне это нравится, хотя мне нужно добавить, что контурное смещение не поддерживается IE.

— Тим

6

Это исключает стрелки справа, что недопустимо портит работу пользователя. Вместо этого стилизуйте раскрывающийся список, background-color: #yourbgа border-style: noneзатем создайте div непосредственно перед раскрывающимся списком с помощью position: absoluteи border-bottom: 1px solid #youpickи display: inline. Стрелки сохранены, UX не поврежден, лучше исправить.

— Разработчик

90

Просто мое решение с выпадающим изображением (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='%23444' 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;
}

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

— Афзал Хоссейн
источник

4

Это единственный ответ, который решил мою проблему, хотя следует помнить об использовании background vs background-image, так как цвет заливки svg перезапишет любой цвет фона, который вы установили для ввода.

— Лукас М

Договорились, пожалуйста, проголосуйте за этот ответ! Я не понимаю других голосов за неполный ответ. Любой совет, чтобы использовать Fontawesome значок вместо встроенного SVG?

— Николас Тери

FontAwesome - это набор иконок, но вам нужен только один значок. Таким образом, вам нужно извлечь один из значков ФА с помощью какого-либо инструмента, такого как icomoon.io. После этого экспортируйте этот значок в виде файла SVG или PNG и свяжите его с вашим CSS

— Afzal Hossain

Хорошее решение, но в моей ситуации я добавил цвет фона: белый;

— Виктор Богуцкий

Обратите внимание, однако, что при установке width: auto;добавленная стрелка SVG перекрывает содержимое выбора. Это требует дополнительного дополнения к правой стороне 16px. Однако этот отступ виден во всех браузерах, что нарушает дизайн в других браузерах. У меня пока нет решения для этого ...

— Клаас ван дер

31

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

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

— jordan314
источник

2

Проблема в том, что вы переопределите значение outlineпо умолчанию :focus. Если вы собираетесь использовать этот ответ, вы должны изменить свой select:focusстиль, чтобы визуально показать, что selectэлемент становится активным или :focusредактируется при щелчке.

— Девин Макиннис

@ jordan314 Посмотрите на скругленные углы на этой картинке . Граница-радиус: 0; не влияет на тег выбора. По крайней мере, на Chrome OSX в любом случае.

— Jammer

1

@ 7immy, что странно, я тоже на Chrome OS X и вот скриншот вышеупомянутой скрипки imgur.com/r6ce6Yv

— jordan314

1

@ jordan314 Как насчет этого? jsfiddle.net/78xa6qud/2 . Я думаю, что мы можем избежать неприятностей, если фон выделения и фон позади него одного цвета.

— Jammer

@ 7immy ах да, наверное, это предостережение.

— jordan314

7

Здесь есть несколько хороших решений, но этот не требует 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>

Развернуть фрагмент

— aleemb
источник

6

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

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

— Рид Мартин
источник

4

Решение с пользовательской правой стрелкой раскрывающегося списка, использует только CSS (без изображений)

select {
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
  background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
  background-size: 5px 5px, 5px 5px, 1px 1.5em;
  background-repeat: no-repeat;

  -moz-appearance: none;
  display: block;
  padding: 0.3rem;
  height: 2rem;
  width: 100%;
}

<html>

<body>
  <br/>
  <h4>Example</h4>
  <select>
    <option></option>
    <option>Hello</option>
    <option>World</option>
  </select>
</body>

</html>

Развернуть фрагмент

— Михай Крэйцэ
источник

Фоновое позиционирование, которое работало лучше для моих нужд, было следующим: background-position: calc(100% - 4px) center, 100% center;это перемещает стрелку к центру выбора и полностью вправо. Большое спасибо за отличный старт!

— Брэндон

3

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

— Дэнни Сантос
источник

1

Я согласен, это, безусловно, самое простое и надежное и портативное решение.

— Джон Хенкель

1

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

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

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

— devigner
источник

1

Вставка box-shadow делает свое дело.

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

демонстрация

— Марко Аллори
источник

0

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

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

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

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

— mcallahan
источник

Хм, не уверен насчет OSX. Просто попробовал еще раз в Windows (Chrome Version 45.0), и он все еще работает. Я думаю, чтобы сделать проблему еще более странной, это

— зависит

Это связано с тем, что установка границы заставляет браузер отображать сам комбинированный список, а не использовать базовый, предоставляемый ОС.

— Конг

0

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

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>

Развернуть фрагмент

— Amit
источник

0

Ниже приведен способ сделать это;

Создайте фоновое изображение, которое выглядит как выпадающий.
Отключить внешний вид браузера
Выровняйте фоновое изображение на выбранном компоненте

  .control select {  
    border-radius: 0px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("<your image>");
    background-repeat: no-repeat;
    background-position: 100%;
    background-size: 20px;
  }

— Джером Энтони
источник

-1

Я использовал решение jordan314, но затем добавил класс «border-light» для выбора. Если у вас есть класс border-light, определенный в css, вы можете использовать его напрямую. Он просто определяет границу как белый). Я изменил границу на квадрат / убрал радиус и сохранил стрелку.

Вот что я сделал:

<select class="form-control border border-light" id="type">
   <option>Select</option>
   <option value="mobile">Apple</option>
 </select>

если у вас нет предопределенного пограничного света, просто добавьте в свой CSS:

<style>
.border-light{
         border-color:#f8f9fa!important
     }

 #type {
   border:0;
   outline:1px solid #ddd;
   background-color:white;
 }
</style>

— Ситти Мунира Абдул Разак
источник

-8

Firefox: 18

.squaredcorners {
    -moz-appearance: none;
}

— Дэвид Форстнер
источник

Вопрос о Chrome / Webkit.

— zishe

-10

Установить CSS как

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

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

— AbhiRoczz ...
источник