Entfernen abgerundeter Ecken aus einem <select> -Element in Chrome / Webkit

143

Das User-Agent-Stylesheet für Chrome gibt allen Ecken eines <select>Elements einen Rahmenradius von 5 Pixel . Ich habe versucht, dies zu beseitigen, indem ich einen Radius von 0 Pixel über mein externes Stylesheet sowie inline auf das Element selbst angewendet habe. Ich habe beides ausprobiert border-radius:0pxund -webkit-border-radius:0px;das noch spezifischere ausprobiert border-top-left-radius:0px(zusammen mit dem -webkit-Äquivalent).

Keiner arbeitet.

Wenn ich das Element in den Entwicklertools des Webkits untersuche, listet der berechnete Stil den Radius immer noch als 5 Pixel auf. Wenn ich jedoch auf den Erweiterungspfeil daneben klicke, um die Details anzuzeigen, wird Folgendes angezeigt: element.style - 0px. Und darunter zeigt es die externe CSS-Spezifikation, die ich von 0px gegeben habe, zusammen mit der User-Agent-Stylesheet-Spezifikation von 5px. Und diese beiden letzteren sind durchgestrichen, wie sie sein sollten.

Irgendwelche Ideen?

select webkit css Maxedison
quelle
Könnten Sie auch den Code posten? Noch besser, wenn Sie es mit jsfiddle.net veröffentlichen.
ngen
1
Ich habe in Chrome 10 unter Win7 keinen Rahmenradius als Standardstil. Vielleicht ist dies eine andere Version oder ein anderes Betriebssystem?
Wesley Murch
Auch in Chrome 12 unter Windows 7 gibt es keine abgerundeten Ecken.
Andyb
1
Hätte erwähnen sollen, dass es unter Mac OS X
läuft.

Antworten:

244

Dies funktioniert bei mir (formatiert das erste Erscheinungsbild, nicht die Dropdown-Liste):

select {
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
}

http://jsfiddle.net/fMuPt/

antonj
quelle
179
Gibt es eine Möglichkeit, die abgerundeten Ecken zu entfernen, aber die Pfeile rechts zu halten?
Adam
3
Sie müssen die Pfeile zB als Hintergrundbild mit einer Position von 100% bis 50% und einem Attribut ohne Wiederholung hinzufügen. Ich habe auch ein Base64-codiertes Image in CSS verwendet, um zusätzliche http-Anforderungen zu vermeiden.
Karl Adler
26
@ Adam Es hat bei mir funktioniert, wenn Sie border: 0eine Gliederung verwenden und hinzufügen wie:outline: 1px inset black; outline-offset:-1px
Filipe Pereira
1
@FilipePereira Schön, dass es mir gefällt, obwohl ich hinzufügen muss, dass der Umrissversatz vom IE nicht unterstützt wird.
Tim
6
Dadurch werden die Pfeile auf der rechten Seite entfernt, was die Benutzererfahrung in unannehmbarer Weise beeinträchtigt. Gestalten Sie stattdessen das Dropdown-Menü background-color: #yourbgund border-style: noneerstellen Sie ein Div direkt vor dem Dropdown-Menü mit position: absoluteund border-bottom: 1px solid #youpickund display: inline. Pfeile erhalten, UX unversehrt, besser zu reparieren.
Devigner
90

Nur meine Lösung mit Dropdown-Bild (inline svg)

select.form-control {
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='%23444' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>");
    background-position: 100% 50%;
    background-repeat: no-repeat;
}

Ich benutze Bootstrap, deshalb habe ich verwendet. select.form-control
Sie können select{oder select.your-custom-class{stattdessen verwenden.

Afzal Hossain
quelle
4
Dies ist die einzige Antwort, die mein Problem gelöst hat. Achten Sie jedoch darauf, Hintergrund- und Hintergrundbild zu verwenden, da die Füllfarbe des SVG jede Hintergrundfarbe überschreibt, die Sie für Ihre Eingabe festgelegt haben.
Lucas M
Einverstanden, bitte stimmen Sie diese Antwort ab! Ich verstehe die anderen Stimmen zu einer unvollständigen Antwort nicht. Irgendwelche Ratschläge, um ein Fontawesome-Symbol anstelle eines Inline-SVG zu verwenden?
Nicolas Thery
FontAwesome ist eine Sammlung von Symbolen, aber Sie benötigen nur ein Symbol. Sie müssen also eines der FA-Symbole mit einem Tool wie icomoon.io extrahieren. Danach exportieren Sie dieses Symbol als SVG- oder PNG-Datei und verknüpfen es von Ihrem CSS
Afzal Hossain
Schöne Lösung, aber in meiner Situation habe ich Hintergrundfarbe hinzugefügt: weiß;
Viktor Bogutskii
Beachten Sie jedoch, dass width: auto;der hinzugefügte SVG-Pfeil beim Festlegen den Inhalt der Auswahl überlagert. Dies erfordert eine zusätzliche Polsterung auf der rechten Seite von 16px. Diese Auffüllung ist jedoch in allen Browsern sichtbar und beeinträchtigt das Design in anderen Browsern. Ich habe noch keine Lösung dafür ...
Klaas van der Weij
31

Wenn Sie quadratische Ränder und dennoch den kleinen Expanderpfeil möchten, empfehle ich Folgendes:

select.squarecorners{
     border: 0;
     outline: 1px solid #CCC;
     background-color: white;
}
jordan314
quelle
2
Das Problem dabei ist, dass Sie die Standardeinstellung outlinefür überschreiben :focus. Wenn Sie diese Antwort verwenden möchten, sollten Sie Ihren select:focusStil ändern, um visuell anzuzeigen, dass das selectElement :focusbeim Klicken aktiv oder bearbeitet wird.
Devin McInnis
@ jordan314 Schauen Sie sich die abgerundeten Ecken auf diesem Bild an . Randradius: 0; hat keine Auswirkung auf das Auswahl-Tag. Zumindest unter Chrome OSX.
Jammer
1
@ 7immy das ist seltsam, ich bin auch auf Chrome OS X und hier ist ein Screenshot der obigen Geige imgur.com/r6ce6Yv
jordan314
1
@ jordan314 Wie wäre es damit? jsfiddle.net/78xa6qud/2 . Ich denke, wir können damit durchkommen, wenn der Hintergrund der Auswahl und der Hintergrund dahinter dieselbe Farbe haben.
Jammer
@ 7immy ah ja, ich denke das ist eine Einschränkung.
Jordan314
7

Einige gute Lösungen hier, aber diese benötigt kein SVG, bewahrt den Rand über outlineund setzt ihn bündig auf die Schaltfläche.

select {
  height: 20px;
  -webkit-border-radius: 0;
  border: 0;
  outline: 1px solid #ccc;
  outline-offset: -1px;
}
<select>
 <option>Apple</option>
 <option>Ball</option>
 <option>Cat</option>
</select>
Erweitern Sie das Snippet

Aleemb
quelle
6

Während die oberste Antwort den Rand entfernt, entfernt sie auch den Pfeil, was es für den Benutzer äußerst schwierig, wenn nicht unmöglich macht, das Element als Auswahl zu identifizieren.

Meine Lösung bestand darin, einfach ein weißes Div (mit Randradius: 0px) hinter die Auswahl zu kleben. Stellen Sie seine Position auf absolut, seine Höhe auf die Höhe der Auswahl, und Sie sollten bereit sein zu gehen!

Reed Martin
quelle
4

Lösung mit benutzerdefiniertem rechten Dropdown-Pfeil, verwendet nur CSS (keine Bilder)

select {
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
  background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
  background-size: 5px 5px, 5px 5px, 1px 1.5em;
  background-repeat: no-repeat;

  -moz-appearance: none;
  display: block;
  padding: 0.3rem;
  height: 2rem;
  width: 100%;
}
<html>

<body>
  <br/>
  <h4>Example</h4>
  <select>
    <option></option>
    <option>Hello</option>
    <option>World</option>
  </select>
</body>

</html>
Erweitern Sie das Snippet

Mihai Crăiță
quelle
Die Hintergrundpositionierung, die für meine Anforderungen besser funktionierte, war: background-position: calc(100% - 4px) center, 100% center;Dadurch wird der Pfeil in die Mitte der Auswahl und ganz nach rechts verschoben. Vielen Dank für den tollen Start!
Brandon
3

Eine Möglichkeit, es einfach zu halten und das Durcheinander mit den Pfeilen und anderen derartigen Funktionen zu vermeiden, besteht darin, es in einem Div mit der gleichen Hintergrundfarbe wie das Auswahl-Tag unterzubringen.

Danny Santos
quelle
1
Ich stimme zu, dies ist bei weitem die einfachste und zuverlässigste und tragbarste Lösung.
John Henckel
1

Das Eliminieren der Pfeile sollte vermieden werden. Eine Lösung, bei der die Dropdown-Pfeile erhalten bleiben, besteht darin, zuerst Stile aus dem Dropdown-Menü zu entfernen:

.myDropdown {
  background-color: #yourbg;
  border-style: none;
}

Erstellen Sie dann div direkt vor dem Dropdown in Ihrem HTML:

<div class="myDiv"></div>
<select class="myDropdown...">...</select>

Und gestalte das Div so:

.myDiv {
  background-color: #yourbg;
  border-style: none;
  position: absolute;
  display: inline;
  border: 1px solid #acolor;
}

Inline-Anzeige verhindert, dass das div in eine neue Zeile wechselt. Position absolute entfernt sie aus dem Seitenfluss. Das Endergebnis ist eine schöne, saubere Unterstreichung, die Sie nach Belieben stylen können, und Ihr Dropdown-Menü verhält sich immer noch so, wie es der Benutzer erwarten würde.

Devigner
quelle
1

Inset Box-Shadow macht den Trick.

select{
  -webkit-appearance: none;
  box-shadow: inset 0px 0px 0px 4px;
  border-radius: 0px;
  border: none;
  padding:20px 150px 20px 10px;
}

Demo

Marco Allori
quelle
0

Aus irgendeinem Grund wird es tatsächlich von der Farbe des Randes beeinflusst ??? Wenn Sie die Standardfarbe verwenden, bleiben die Ecken abgerundet, aber wenn Sie die Farbe auch nur geringfügig ändern, verschwindet die Rundung.

select.regularcolor {
    border-color: rgb(169, 169, 169);
}

select.offcolor {
    border-color: rgb(170, 170, 170);
}

https://jsfiddle.net/hLg70o70/2/

Mcallahan
quelle
Hmm nicht sicher über OSX. Ich habe es gerade unter Windows (Chrome Version 45.0) erneut versucht und es funktioniert immer noch. Ich denke, um das Problem noch seltsamer zu machen, ist es plattformspezifisch ...
mcallahan
Dies liegt daran, dass der Browser beim Festlegen des Rahmens die Combobox selbst rendert, anstatt die vom Betriebssystem bereitgestellte zugrunde liegende zu verwenden.
Kong
0

Nun, ich habe die Lösung. hoffe es kann dir helfen :)

select{
      border-image: url(http://www.w3schools.com/cssref/border.png) 30 stretch;
      width: 120px;
      height: 36px;
      color: #999;
  }
<select>
  <option value="1">Hi</option>
  <option value="2">Bye</option>
</select>
Erweitern Sie das Snippet

Amit
quelle
0

Das Folgende ist der Weg, es zu tun;

  1. Erstellen Sie ein Hintergrundbild, das wie ein Dropdown aussieht.
  2. Schalten Sie das Erscheinungsbild des Browsers aus
  3. Richten Sie das Hintergrundbild auf der ausgewählten Komponente aus
  .control select {  
    border-radius: 0px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("<your image>");
    background-repeat: no-repeat;
    background-position: 100%;
    background-size: 20px;
  }
Jerome Anthony
quelle
-1

Ich habe die Lösung von jordan314 verwendet, aber dann habe ich zur Auswahl die Klasse "border-light" hinzugefügt. Wenn in CSS die Standardklasse für Randlicht definiert ist, können Sie diese direkt verwenden. Es definiert nur den Rand als weiß). Ich habe den Rand in Quadrat geändert / den Radius entfernt und den Pfeil beibehalten.

Folgendes habe ich getan:

<select class="form-control border border-light" id="type">
   <option>Select</option>
   <option value="mobile">Apple</option>
 </select>

Wenn Sie nicht über das vordefinierte Rahmenlicht verfügen, fügen Sie einfach Ihr CSS hinzu:

<style>
.border-light{
         border-color:#f8f9fa!important
     }

 #type {
   border:0;
   outline:1px solid #ddd;
   background-color:white;
 }
</style>
Sitti Munirah Abdul Razak
quelle
-8

Firefox: 18

.squaredcorners {
    -moz-appearance: none;
}
David Forstner
quelle
Die Frage zu Chrome / Webkit.
Zishe
-10

Stellen Sie das CSS als ein 

border-radius:0px !important
-webkit-border-radius:0px !important
border-top-left-radius:0px !important

Versuchen Sie, ob es funktioniert.

AbhiRoczz ...
quelle