Удалить радиус границы из тега Select в начальной загрузке 3

Question

Удалить радиус границы из тега Select в начальной загрузке 3

89

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

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

Посмотрев на код, он выглядит так, что в этом элементе выбирается граничный радиус 4.

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

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

Tyler McGinnis 13 июнь 2014, в 18:02

Источник

1

Изменение радиуса границы в классе .form-control прекрасно работает для меня. bootply.com/Q7goAsFc0B
j08691 13 июнь 2014, в 16:45
0

Даже в вашем примере закругленные углы на этом элементе выбора ...?
Tyler McGinnis 13 июнь 2014, в 16:46
0

Нет, нет.
j08691 13 июнь 2014, в 16:49
2

Оказывается, это проблема с Chrome. Открыв свой загрузочный лист в Firefox, он не закругляется. Weird.
Tyler McGinnis 13 июнь 2014, в 17:14
0

У меня работает как в Chrome, так и в FF.
j08691 13 июнь 2014, в 17:15
0

Тогда это специфично для моей машины. Не уверен, что происходит. Спасибо за помощь.
Tyler McGinnis 13 июнь 2014, в 17:18
1

для меня это не работает в Chrome, но отлично работает в Firefox
Maverick 28 нояб. 2015, в 09:02
0

@TylerMcGinnis Не имеет значения, но как вы изменили цветовую схему инструментов? Я люблю это.
Jarrod W. 17 сен. 2018, в 15:45
0

Возможный дубликат Как оформить выпадающий список <select> только с помощью CSS?
Eric 30 окт. 2018, в 14:03

Показать ещё 7 комментариев

Теги:

twitter-bootstrap

css

5 ответов

162

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

Рабочий пример: 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+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
    padding: .5em;
    padding-right: 1.5em
}

#mySelect {
    border-radius: 0
}

<select id="mySelect">
    <option>Option 1</option>
    <option>Option 2</option>
</select>

Eric 13 июль 2015, в 02:53

24

Это должен быть реальный ответ.
avoliva 14 авг. 2015, в 23:31
1

Я второй это !!!
Pixelomo 07 сен. 2015, в 15:02
1

Это лучший ответ, чем выбранный
Chris James Champeau 17 янв. 2016, в 08:28
6

Вы также можете использовать SVG для этого. <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="14px" height="12px" viewBox="0 0 14 12" enable-background="new 0 0 14 12" xml:space="preserve"> <polygon points="3.862,7.931 0,4.069 7.725,4.069 "/></svg> это экономит то же самое файловое пространство. Это также кешируется и проще в обслуживании. Скопируйте это в файл и сохраните как .svg и используйте в качестве фона.
Arno Tenkink 11 март 2016, в 10:09
1

это ответ.
Conrad Warhol 29 июль 2016, в 21:22
1

Лучший ответ! Отличная работа!
Siddharth 21 авг. 2017, в 06:36
1

Лучший ответ, который я нашел до сих пор на этот вопрос.
David 21 сен. 2017, в 18:45
2

Это определенно лучший ответ. Я искал способ сделать это несколько раз. Это должно сильно помочь, спасибо! :)
jaredwilli 24 сен. 2017, в 20:04
1

Определенно лучший ответ. Особенно из-за SVG вместо base64. Спасибо, что поделился!
Jasper Mulder 07 март 2019, в 15:26

Показать ещё 7 комментариев

6

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

HTML:

<span class="select-wrapper">
    <select class="form-control no-radius">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</span>

CSS

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

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

Logan Besecker 22 май 2015, в 00:15

0

Это работает, только если у выбора есть белый фон. В противном случае будет радиус, если используется другой цвет.
MichalCh 22 фев. 2017, в 18:00
0

Привет @MichalCh, хороший улов! Один из способов обойти это - установить цвет фона оболочки на то же значение, что и у элемента select. Вот модифицированная версия jsfiddle для демонстрации: https://jsfiddle.net/Lrqh0drd/75/
Logan Besecker 24 фев. 2017, в 18:20
0

Это самое чистое решение.
Nikolay Tsenkov 11 дек. 2018, в 06:59

Показать ещё 1 комментарий

0

Используя 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
}

Marius 01 окт. 2017, в 22:09

-3

класс называется:

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

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

Если вы хотите удалить радиус только в элементах формы, используйте

select.form-control { ... }

вместо

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

jBear Graphics 13 июнь 2014, в 18:28

0

Я специально показал в вопросе, как я изменил радиус границы при управлении формой, и он не работал ..., что побудило меня задать вопрос.
Tyler McGinnis 13 июнь 2014, в 16:47
1

jsfiddle.net/Ut4y9/3 вот рабочая скрипка. если он все еще не работает на вашем компьютере, не могли бы вы указать браузер, который вы используете? Я не могу воспроизвести вашу проблему. извиняюсь
jBear Graphics 13 июнь 2014, в 16:55
0

Weird. Я использую последнюю версию Chrome. Очевидно, это что-то специфичное для машины, так как вы оба видите, что это изменилось. Отредактируйте свой ответ, чтобы я мог изменить свое мнение :)
Tyler McGinnis 13 июнь 2014, в 17:12
0

У меня та же проблема. Несмотря на то, что я переопределила радиус границы, он все еще показывает Сводит меня с ума.
user1732055 15 июль 2014, в 18:54
0

Это все еще в случае с самой последней Bootstrap 3
genkilabs 13 май 2015, в 19:13

Показать ещё 3 комментария

Ещё вопросы

Изменение радиуса границы в классе .form-control прекрасно работает для меня. bootply.com/Q7goAsFc0B
Даже в вашем примере закругленные углы на этом элементе выбора ...?
Оказывается, это проблема с Chrome. Открыв свой загрузочный лист в Firefox, он не закругляется. Weird.
У меня работает как в Chrome, так и в FF.
Тогда это специфично для моей машины. Не уверен, что происходит. Спасибо за помощь.
для меня это не работает в Chrome, но отлично работает в Firefox
@TylerMcGinnis Не имеет значения, но как вы изменили цветовую схему инструментов? Я люблю это.
Возможный дубликат Как оформить выпадающий список <select> только с помощью CSS?
Вы также можете использовать SVG для этого. <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="14px" height="12px" viewBox="0 0 14 12" enable-background="new 0 0 14 12" xml:space="preserve"> <polygon points="3.862,7.931 0,4.069 7.725,4.069 "/></svg> это экономит то же самое файловое пространство. Это также кешируется и проще в обслуживании. Скопируйте это в файл и сохраните как .svg и используйте в качестве фона.
Лучший ответ, который я нашел до сих пор на этот вопрос.
Это определенно лучший ответ. Я искал способ сделать это несколько раз. Это должно сильно помочь, спасибо! :)
Определенно лучший ответ. Особенно из-за SVG вместо base64. Спасибо, что поделился!
Это работает, только если у выбора есть белый фон. В противном случае будет радиус, если используется другой цвет.
Привет @MichalCh, хороший улов! Один из способов обойти это - установить цвет фона оболочки на то же значение, что и у элемента select. Вот модифицированная версия jsfiddle для демонстрации: https://jsfiddle.net/Lrqh0drd/75/
Я специально показал в вопросе, как я изменил радиус границы при управлении формой, и он не работал ..., что побудило меня задать вопрос.
jsfiddle.net/Ut4y9/3 вот рабочая скрипка. если он все еще не работает на вашем компьютере, не могли бы вы указать браузер, который вы используете? Я не могу воспроизвести вашу проблему. извиняюсь
Weird. Я использую последнюю версию Chrome. Очевидно, это что-то специфичное для машины, так как вы оба видите, что это изменилось. Отредактируйте свой ответ, чтобы я мог изменить свое мнение :)
У меня та же проблема. Несмотря на то, что я переопределила радиус границы, он все еще показывает Сводит меня с ума.
Это все еще в случае с самой последней Bootstrap 3

user1732055 · Accepted Answer · 2014-07-15T19-25-00.000Z

151

Лучший ответ

В дополнение к border-radius: 0 добавьте -webkit-appearance: none;.

user1732055 15 июль 2014, в 19:25

0

Спасибо, твой ответ помог мне! :)
Sebsemillia 20 июль 2014, в 22:32
2

решение верное - но неспособность понять, почему это происходит в инструментах разработки, просто неправильно. спасибо за решение загадки человек!
mmln 06 авг. 2014, в 22:33
96

Это работает, но не идеально, -webkit-appearance: none; вызовет отсутствие индикатора стрелки справа.
nightire 15 авг. 2014, в 07:12
39

@nightire Это сработало для меня, если вы используете border: 0 и добавляете контур вроде: outline: 1px inset black; outline-offset:-1px . Сохраните стрелки и вы сможете подделать границу с помощью контура.
Filipe Pereira 05 нояб. 2014, в 09:53
0

@FilipePereira Это не решило проблему в моем случае, но он добавил контур границы с черным цветом. это происходит в Mozilla, а не в Chrome.
Akilsree1 16 март 2015, в 05:57
0

удалить строку -webkit-appearance:none; из css. или же ожидаемый вывод не приходит в браузере Chrome.
Akilsree1 16 март 2015, в 06:00
0

Не идеальное решение, потому что это убирает стрелки индикатора выбора.
Josh 30 апр. 2015, в 19:12
2

Да, это не совсем решение, потому что, как все говорили, стрелка выбора исчезает.
Chad Johnson 14 май 2015, в 00:20
1

@FilipePereira это работает, но смещение контура не поддерживается для IE
avoliva 14 авг. 2015, в 23:04
2

Не забудьте IE! :) выберите :: - ms-expand {display: none; }
Kyle Hawk 30 март 2016, в 15:19
1

Для пользователей bootstrap @ 4 добавление класса custom-select вернет стрелки.
elquimista 17 окт. 2018, в 09:46

Показать ещё 9 комментариев