Dies scheint ein triviales Problem zu sein, aber ich kann es nicht herausfinden.
Auf der Bootstraps-eigenen Website haben sie das Select-Beispiel.
Wenn man sich den Code ansieht, sieht es so aus, als ob dieses Auswahlelement einen Randradius von 4 hat.
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.
Ich habe das gesamte CSS untersucht, das dieses Auswahlelement ändert, aber nichts davon scheint den Rahmenradius zu entfernen.
css
twitter-bootstrap
Tyler McGinnis
quelle
quelle
.form-control
Klasse funktioniert für mich einwandfrei. bootply.com/Q7goAsFc0BAntworten:
Hier ist eine Version, die in allen modernen Browsern funktioniert. Der Schlüssel wird verwendet,
appearance:none
wodurch 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:appearance
wird im IE nicht unterstützt .Arbeitsbeispiel: https://jsfiddle.net/gs2q1c7p/
Basierend auf dem Vorschlag von Arno Tenkink in den Kommentaren ist hier ein Beispiel mit asvg anstelle einer png für das Pfeilsymbol.
quelle
<?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.Zusätzlich
border-radius: 0
hinzufügen-webkit-appearance: none;
.quelle
-webkit-appearance: none;
wird das ausgewählte Fehlen der Pfeilanzeige auf der rechten Seite verursachen.border: 0
eine 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.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
select
Element entfernt und einen Wrapperspan
mit einem Rand erstellt habe.html:
CSS:
https://jsfiddle.net/Lrqh0drd/6/
quelle
Sie können verwenden
-webkit-border-radius: 0;
. So was:-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.quelle
outline: none;
.Mit der SVG von @ArnoTenkink als Daten-URL in Kombination mit der akzeptierten Antwort erhalten wir die perfekte Lösung für Retina-Displays.
quelle
Die Klasse heißt:
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
stattdessen
EDIT: funktioniert für mich auf Chrome, Firefox, Oper und Safari, IE9 + (alle laufen unter Linux / Safari & IE unter Playonlinux)
quelle