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

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



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



bootstrap select






Глядя на код, похоже, что на этом элементе select есть радиус границы 4.
enter image description here






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



enter image description here






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

630   6  

6 ответов:

кроме border-radius: 0 добавьте -webkit-appearance: none;.

182  
2015-03-16 01:03:52

вот версия, которая работает во всех современных браузерах. Ключ использует 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+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>
191  
2018-01-03 03:04:15

у меня была та же проблема, и в то время как ответ 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/

8  
2015-05-29 19:40:23

можно использовать -webkit-border-radius: 0;. Вот так: -

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

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

2  
2018-05-14 12:03:53

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

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
}
0  
2017-10-01 23:53:06

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

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

Не забудьте вставить переопределение после загрузки в CSS.

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

select.form-control { ... }

вместо

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

-3  
2014-06-13 20:22:28

Comments

    Ничего не найдено.
Click here to cancel reply.