Entfernen Sie den Randradius aus dem Tag auswählen in Bootstrap 3

133

Dies scheint ein triviales Problem zu sein, aber ich kann es nicht herausfinden.

Auf der Bootstraps-eigenen Website haben sie das Select-Beispiel.

Bootstrap auswählen



Wenn man sich den Code ansieht, sieht es so aus, als ob dieses Auswahlelement einen Randradius von 4 hat. Geben Sie hier die Bildbeschreibung ein



Ich hoffe, dass durch Ändern dieses Randradius auf 0 der Randradius aus dem Auswahlelement entfernt wird. Dies ist jedoch nicht der Fall - wie im Bild unten dargestellt.

Geben Sie hier die Bildbeschreibung ein



Ich habe das gesamte CSS untersucht, das dieses Auswahlelement ändert, aber nichts davon scheint den Rahmenradius zu entfernen.

Tyler McGinnis
quelle
1
Das Ändern des Randradius für die .form-controlKlasse funktioniert für mich einwandfrei. bootply.com/Q7goAsFc0B
j08691
1
Selbst in Ihrem Beispiel gibt es abgerundete Ecken an diesem ausgewählten Element ...?
Tyler McGinnis
2
Es stellt sich heraus, dass es ein Problem mit Chrome ist. Wenn Sie Ihren Bootply in Firefox öffnen, ist er nicht gerundet. Seltsam.
Tyler McGinnis
Funktioniert für mich sowohl in Chrome als auch in FF.
j08691
1
für mich funktioniert es nicht in Chrom, aber es funktioniert gut in Firefox
Maverick

Antworten:

256

Hier ist eine Version, die in allen modernen Browsern funktioniert. Der Schlüssel wird verwendet, appearance:nonewodurch die Standardformatierung entfernt wird. Da die gesamte Formatierung weg ist, müssen Sie den Pfeil wieder hinzufügen, der die Auswahl visuell von der Eingabe unterscheidet. Hinweis: appearancewird im IE nicht unterstützt .

Arbeitsbeispiel: 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>

Basierend auf dem Vorschlag von Arno Tenkink in den Kommentaren ist hier ein Beispiel mit a anstelle einer für das Pfeilsymbol.

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>

Eric
quelle
26
Dies sollte die wahre Antwort sein.
Avoliva
1
Dies ist eine bessere Antwort als die ausgewählte
Chris James Champeau
7
Sie können hierfür auch eine SVG verwenden. <?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>Es spart den gleichen Speicherplatz. Es ist auch zwischenspeicherbar und einfacher zu warten. Kopieren Sie dies in eine Datei, speichern Sie es als .svg und verwenden Sie es als Hintergrund.
Arno Tenkink
1
das ist die Antwort.
Conrad Warhol
2
Dies ist definitiv die beste Antwort. Ich habe ein paar Mal nach einer Möglichkeit gesucht, dies zu tun. Es sollte viel helfen, danke! :)
Jaredwilli
215

Zusätzlich border-radius: 0hinzufügen -webkit-appearance: none;.

user1732055
quelle
2
Die Lösung ist richtig - aber nicht zu sehen, warum dies in Entwicklungswerkzeugen geschieht, ist einfach falsch. Danke, dass du das Rätsel gelöst hast!
Am
101
Es funktioniert aber nicht perfekt, -webkit-appearance: none;wird das ausgewählte Fehlen der Pfeilanzeige auf der rechten Seite verursachen.
Nightire
41
@nightire Es hat bei mir funktioniert, wenn Sie border: 0eine Gliederung verwenden und hinzufügen wie : outline: 1px inset black; outline-offset:-1px. Behält die Pfeile und Sie können den Rand mit dem Umriss fälschen.
Filipe Pereira
2
Ja, das ist keine wirkliche Lösung, denn wie jeder gesagt hat, verschwindet der Auswahlpfeil.
Chad Johnson
2
IE nicht vergessen! :) select :: - ms-expand {display: none; }
Kyle Hawk
13

Ich hatte das gleiche Problem und während die Antwort von Benutzer 1732055 den Rand behebt, werden die Dropdown-Pfeile entfernt. Ich habe dieses Problem gelöst, indem ich den Rand aus dem selectElement entfernt und einen Wrapper spanmit einem Rand erstellt habe.

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
quelle
Dies funktioniert nur, wenn die Auswahl einen weißen Hintergrund hat. Andernfalls entsteht ein Radius, wenn eine andere Farbe verwendet wird.
MichalCh
Hallo @MichalCh, guter Fang! Eine Möglichkeit, dies zu umgehen, besteht darin, die Hintergrundfarbe des Wrappers auf den gleichen Wert wie das Auswahlelement festzulegen. Hier ist eine modifizierte Version auf jsfiddle, um zu demonstrieren: https://jsfiddle.net/Lrqh0drd/75/
Logan Besecker
Dies ist die sauberste Lösung.
Nikolay Tsenkov
2

Sie können verwenden -webkit-border-radius: 0;. So was:-

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

Dies gibt quadratische Ecken sowie Dropdown-Pfeile. Die Verwendung -webkit-appearance: none;wird nicht empfohlen, da dadurch das gesamte von Chrome vorgenommene Styling deaktiviert wird.

gns
quelle
aber das hat auch ein Problem; Beim Fokussieren wird der Umrissrandradius nicht gelöscht.
Elquimista
@elquimista können Sie einfach dafür verwenden outline: none;.
gns
0

Mit der SVG von @ArnoTenkink als Daten-URL in Kombination mit der akzeptierten Antwort erhalten wir die perfekte Lösung für Retina-Displays.

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
quelle
-5

Die Klasse heißt:

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

Stellen Sie sicher, dass Sie die Überschreibung einfügen, nachdem Sie Bootstraps-CSS hinzugefügt haben.

Wenn Sie NUR den Radius bei ausgewählten Formularsteuerelementen entfernen möchten, verwenden Sie

select.form-control { ... }

stattdessen

EDIT: funktioniert für mich auf Chrome, Firefox, Oper und Safari, IE9 + (alle laufen unter Linux / Safari & IE unter Playonlinux)

jBear Graphics
quelle
Ich habe in der Frage speziell gezeigt, wie ich den Rahmenradius bei der Formularsteuerung geändert habe und es hat nicht funktioniert ... was mich dazu veranlasst hat, die Frage zu stellen.
Tyler McGinnis
1
jsfiddle.net/Ut4y9/3 hier ist eine funktionierende Geige. Wenn es auf Ihrem Computer immer noch nicht funktioniert, können Sie bitte den von Ihnen verwendeten Browser angeben. Ich kann Ihr Problem nicht reproduzieren. Entschuldigung
jBear Graphics
Seltsam. Ich verwende die neueste Version von Chrome. Offensichtlich ist es etwas Maschinenspezifisches, da Sie beide sehen, dass es sich geändert hat. Bearbeiten Sie Ihre Antwort, damit ich meine Ablehnung ändern kann :)
Tyler McGinnis
Ich habe das gleiche Problem. Trotz meiner Überschreibung des Randradius wird es immer noch angezeigt. Macht mich verrückt.
user1732055
Dies ist immer noch der Fall mit dem neuesten Bootstrap 3
Genkilabs