Xóa bán kính đường viền khỏi thẻ Chọn trong bootstrap 3

Đây có vẻ là một vấn đề nhỏ, nhưng tôi không thể tìm ra nó.

Trên trang web riêng của Bootstraps, họ có ví dụ Chọn.

Nhìn vào mã, có vẻ như có bán kính đường viền là 4 trên phần tử được chọn đó.

Tôi hy vọng rằng việc thay đổi bán kính đường viền thành 0 sau đó sẽ loại bỏ bán kính đường viền khỏi thành phần được chọn, tuy nhiên, đó không phải là trường hợp - như trong hình dưới đây.

Tôi đã khám phá tất cả các CSS đang thay đổi phần tử chọn đó nhưng dường như không có phần tử nào xóa bỏ bán kính đường viền.

Đây là một phiên bản hoạt động trong tất cả các trình duyệt hiện đại. Khóa này đang sử dụng appearance:noneloại bỏ định dạng mặc định. Vì tất cả các định dạng đã biến mất, bạn phải thêm lại vào mũi tên phân biệt trực quan lựa chọn từ đầu vào. Lưu ý: appearancekhông được hỗ trợ trong IE .

Ví dụ hoạt động: 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>

Dựa trên đề xuất của Arno Tenkink trong các bình luận, đây là một ví dụ sử dụngsvg Thay vì một png cho biểu tượng mũi tên.

select:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-position: right 50%;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml;utf8,<?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 xmlns="http://www.w3.org/2000/svg" width="14" height="12" version="1"><path d="M4 8L0 4h8z"/></svg>');
    padding: .5em;
    padding-right: 1.5em
}

#mySelect {
    border-radius: 0
}

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

Ngoài ra border-radius: 0, thêm -webkit-appearance: none;.

Tôi đã có cùng một vấn đề và trong khi câu trả lời của user1732055 sửa đường viền, nó sẽ loại bỏ các mũi tên thả xuống. Tôi đã giải quyết điều này bằng cách loại bỏ đường viền khỏi thành selectphần và tạo một trình bao bọc spancó đường viền.

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/

Bạn có thể sử dụng -webkit-border-radius: 0;. Như thế này:-

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

Điều này sẽ cho góc vuông cũng như mũi tên thả xuống. Việc sử dụng -webkit-appearance: none;không được khuyến khích vì nó sẽ tắt tất cả các kiểu được thực hiện bởi Chrome.

Sử dụng SVG từ @ArnoTenkink làm url dữ liệu kết hợp với câu trả lời được chấp nhận, điều này mang lại cho chúng tôi giải pháp hoàn hảo cho màn hình võng mạc.

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
}

lớp được gọi là:

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

hãy chắc chắn chèn ghi đè sau khi bao gồm css bootstraps.

Nếu bạn CHỈ muốn xóa bán kính khi chọn điều khiển biểu mẫu, hãy sử dụng

select.form-control { ... }

thay thế

EDIT: hoạt động với tôi trên chrome, firefox, opera và safari, IE9 + (tất cả chạy trên linux / safari & IE trên playonlinux)