Удалить границу радиуса из тега Select в бутстрапе 3

Это кажется тривиальной проблемой, но я не могу понять это.

На собственном веб-сайте Bootstraps есть пример выбора.

выбор бутстрапа

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

Я надеюсь, что изменение граничного радиуса на 0 приведет к удалению радиуса границы из элемента select, однако это не так – как показано на рисунке ниже.

введите описание изображения здесь

Я изучил все CSS, которые меняют этот элемент select, но ни один из них, похоже, не удаляет граничный радиус.

В дополнение к border-radius: 0 , add -webkit-appearance: none; ,

Вот версия, которая работает во всех современных браузерах. Ключ использует appearance:none который удаляет форматирование по умолчанию. Поскольку все форматирование исчезло, вам нужно добавить обратно стрелку, которая визуально отличает выбор от ввода. Примечание. appearance в IE не поддерживается .

Рабочий пример: https://jsfiddle.net/gs2q1c7p/

 select:not([multiple]) { -webkit-appearance: none; -moz-appearance: none; background-position: right 50%; background-repeat: no-repeat; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=); padding: .5em; padding-right: 1.5em } #mySelect { border-radius: 0 } 
  

У меня была та же проблема, и хотя ответ пользователя1732055 фиксирует границу, он удаляет стрелки раскрывающегося списка. Я решил это, удалив границу из элемента select и создав оболочку, которая имеет границу.

HTML:

    

CSS:

 select.no-radius{ border:none; } .select-wrapper{ border: 1px solid black; border-radius: 0px; } 

https://jsfiddle.net/Lrqh0drd/6/

Вы можете использовать -webkit-border-radius: 0; , Как это:-

 -webkit-border-radius: 0; border: 0; outline: 1px solid grey; outline-offset: -1px; 

Это даст квадратные углы, а также стрелки раскрывающегося списка. Использование -webkit-appearance: none; не рекомендуется, так как он отключит все стили, сделанные Chrome.

Используя SVG от @ArnoTenkink в качестве URL-адреса данных в сочетании с принятым ответом, это дает нам идеальное решение для дисплеев сетчатки.

 select.form-control:not([multiple]) { border-radius: 0; appearance: none; background-position: right 50%; background-repeat: no-repeat; background-image: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%20%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%20%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2214px%22%20height%3D%2212px%22%20viewBox%3D%220%200%2014%2012%22%20enable-background%3D%22new%200%200%2014%2012%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cpolygon%20points%3D%223.862%2C7.931%200%2C4.069%207.725%2C4.069%20%22/%3E%3C/svg%3E); padding: .5em; padding-right: 1.5em } 

class называется:

 .form-control { border-radius: 0; } 

обязательно вставьте переопределение после включения bootstraps css.

Если вы ТОЛЬКО хотите удалить радиус на элементе управления формы, используйте

 select.form-control { ... } 

вместо

EDIT: работает для меня на chrome, firefox, opera и safari, IE9 + (все работает на linux / safari и IE на playonlinux)

  • twitter bootstrap navbar фиксированный верхний перекрывающий сайт
  • Применение стилей CSS только к определенным элементам
  • Возможно ли создать только компоновку pinterest с Bootstrap?
  • Как добавить «активный» class в Html.ActionLink в ASP.NET MVC
  • Bootstrap 4 Navbar и заполняющая высота контента flexbox
  • Как использовать пространство имен для Twitter-бутстрапа, поэтому стили не конфликтуют
  • Центрировать колонку с помощью Twitter Bootstrap
  • Bootstrap 3 - Используйте более 12 столбцов подряд
  • Использование twitter bootstrap 2.0 - Как сделать равные высоты столбцов?
  • icons загрузочных бутлетов Twitter отсутствуют в печати
  • Bootstrap 3 Слайд в меню / Navbar на мобильном телефоне
  • Давайте будем гением компьютера.