ブートストラップ3の選択タグからボーダー半径を削除

133

これはささいな問題のようですが、わかりません。

Bootstrapsの独自のWebサイトには、Selectの例があります。

ブートストラップ選択



コードを見ると、その選択要素に4の境界半径があるように見えます。 ここに画像の説明を入力してください



私の希望は、border-radiusを0に変更すると、select要素からborder-radiusが削除されることですが、そうではありません-下の図に示すように。

ここに画像の説明を入力してください



その選択要素を変更しているすべてのCSSを調査しましたが、いずれも境界線の半径を削除していないようです。

css  twitter-bootstrap 
— タイラー・マクギニス
ソース
1
.form-controlクラスの境界線の半径を変更するとうまくいきます。bootply.com/Q7goAsFc0B
— j08691
1
あなたの例でさえ、その選択要素に丸い角があります...？
— タイラーマクギニス2014年
2
Chromeの問題であることがわかりました。bootfoxをFirefoxで開くと、丸められません。変だ。
— タイラーマクギニス2014年
ChromeとFFの両方で動作します。
— j08691 14年
1
私にとっては、Chromeでは機能しませんが、Firefoxでは正常に機能します
— Maverick

回答:

256

ここにすべての最新のブラウザで動作するバージョンがあります。キーを使用appearance:noneすると、デフォルトのフォーマットが削除されます。すべての書式設定がなくなったので、選択と入力を視覚的に区別する矢印を再度追加する必要があります。注：appearanceIEではサポートされていません。

作業例：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>
スニペットを展開

コメントでのArno Tenkinkの提案に基づいて、これはsvg の代わりに png 矢印アイコン。

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>
スニペットを展開

— エリック
ソース
26
これが本当の答えになるはずです。
— avoliva 2015
1
これは選択されたものより良い答えです
— クリスジェームスシャンポー
7
これには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 2016年
1
これが答えです。
— コンラッドウォーホル
2
これは間違いなく最良の答えです。私はこれを数回行う方法を探しました。それは大いに役立つはずです、ありがとう！:)
— jaredwilli 2017
215

に加えてborder-radius: 0、を追加し-webkit-appearance: none;ます。

— ユーザー1732055
ソース
2
解決策は正しい-しかし、なぜこれが開発ツールで起こっているのかを理解することができないのは、まさに間違っている。謎の男を解いてくれてありがとう！
— mmln 2014
101
機能しますが、完全で-webkit-appearance: none;はありません。右側に矢印インジケーターが選択されない原因になります。
— ナイトウェア2014
41
@nightireこれを使用して、次のborder: 0ようなアウトラインを追加するとうまくいきましたoutline: 1px inset black; outline-offset:-1px。矢印を保持し、輪郭との境界を偽造できます。
— フィリペペレイラ
2
ええ、これは実際の解決策ではありません。みんなが言ったように、セレクター矢印が消えるからです。
— Chad Johnson
2
IEをお忘れなく！:) select ::-ms-expand {display：none; }
— カイルホーク
13

同じ問題があり、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/

— ローガン・ベセッカー
ソース
これは、選択の背景が白い場合にのみ機能します。そうでない場合、別の色が使用されている場合は半径があります。
— MichalCh 2017
こんにちは@MichalCh、良いキャッチ！これを回避する1つの方法は、ラッパーのbackground-colorをselect要素と同じ値に設定することです。これはjsfiddleの変更されたバージョンです。https
— //jsfiddle.net/Lrqh0drd/75/
これは最もクリーンなソリューションです。
— Nikolay Tsenkov
2

使用できます-webkit-border-radius: 0;。このような：-

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

これにより、四角形のコーナーとドロップダウン矢印が表示されます。-webkit-appearance: none;Chromeによるすべてのスタイル設定が無効になるため、使用はお勧めしません。

— gns
ソース
しかし、これにも問題があります。フォーカスされたときに輪郭の境界の半径をクリアしません。
— elquimista
@elquimistaだけで使用できますoutline: none;。
— gns
0

@ArnoTenkinkのSVGをデータ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
}
— マリウス
ソース
-5

クラスが呼び出されます：

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

bootstraps cssを含めた後は、必ずオーバーライドを挿入してください。

選択したフォームコントロールの半径のみを削除する場合

select.form-control { ... }

代わりに

編集：chrome、firefox、opera、safari、IE9 +（すべてlinux / safariで動作し、playonlinuxでIE）で動作します

— jBearグラフィック
ソース
質問ではフォームコントロールの境界線の半径をどのように変更したかを具体的に示しましたが、機能しませんでした。そのため、質問するようになりました。
— タイラーマクギニス2014年
1
jsfiddle.net/Ut4y9/3これが動作するフィドルです。それでもお使いのマシンで動作しない場合は、使用しているブラウザを指定していただけますか？問題を再現できません。申し訳ありません
— jBearグラフィック
変だ。Chromeの最新バージョンを使用しています。どちらも変更されているのがわかるので、明らかにマシン固有のものです。回答を編集して、反対票を変更します:)
— Tyler McGinnis
同じ問題があります。border-radiusをオーバーライドしても、まだ表示されています。私を運転している。
— user1732055 14
これは、最新のブートストラップ3にも
— 当てはまります
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.