wake-up-neo.com

Abgerundete Ecken aus einem <select> -Element in Chrome/Webkit entfernen

Das Benutzer-Agent-Stylesheet für Chrome gibt allen Ecken eines <select>-Elements einen Randradius von 5px. Ich habe versucht, dieses Problem zu beseitigen, indem ich einen Radius von 0px durch mein externes Stylesheet sowie Inline auf dem Element selbst anwende. Ich habe sowohl border-radius:0px als auch -webkit-border-radius:0px; ausprobiert und den noch spezifischeren border-top-left-radius:0px (zusammen mit dem Äquivalent von -webkit) ausprobiert.

Keiner funktioniert.

Wenn ich das Element in den Entwicklerwerkzeugen von webkit untersuche, zeigt der berechnete Stil den Radius immer noch als 5px an. Wenn ich jedoch auf den Erweiterungspfeil daneben klicke, um die Besonderheiten zu sehen, 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 die beiden letzteren sind durchgestrichen, wie es sein sollte.

Irgendwelche Ideen?

119
maxedison

Dies funktioniert für mich (formatiert den ersten Auftritt nicht die Dropdownliste):

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

http://jsfiddle.net/fMuPt/

214
antonj

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='#444' 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;
}

Alternative (da das oben genannte nicht mit dem neuesten Firefox funktioniert)

select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-border-radius: 0px;
    background-image: url("https://image.flaticon.com/icons/svg/60/60781.svg");
    background-position: 99% 50%;
    background-repeat: no-repeat;
    background-size: 16px;
}

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

75
Afzal Hossain

Wenn Sie einen quadratischen Rand wünschen und trotzdem den kleinen Expanderpfeil möchten, empfehle ich Folgendes:

select.squarecorners{
     border: 0;
     outline: 1px solid #CCC;
     background-color: white;
}
26
jordan314

Einige gute Lösungen hier, aber diese benötigt kein SVG, behält die Grenze über outline bei und setzt sie 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>

6
aleemb

Während die oberste Antwort den Rand entfernt, wird auch der Pfeil entfernt, wodurch es für den Benutzer äußerst schwierig oder unmöglich ist, das Element als Auswahl zu identifizieren.

Meine Lösung war, einfach ein weißes div (mit Rahmenradius: 0px) hinter das select zu kleben. Stellen Sie die Position auf absolut, die Höhe auf die Höhe des Select-Objekts und Sie sollten loslegen!

5
Reed Martin

Lösung mit benutzerdefiniertem Pfeil nach rechts, 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>

1
Mihai Crăiță

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

1
Marconi

Eine Möglichkeit, es einfach zu halten und das Durcheinander mit den Pfeilen und anderen Merkmalen zu vermeiden, besteht darin, es in einem div mit derselben Hintergrundfarbe wie das select-Tag unterzubringen. 

0
Danny Santos

nun, ich habe die Lösung bekommen. 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>

0
Amit

Das Weglassen der Pfeile sollte vermieden werden. Eine Lösung, bei der die Dropdown-Pfeile beibehalten werden, besteht darin, zunächst Stile aus dem Dropdown-Menü zu entfernen:

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

Dann erstellen Sie div direkt vor dem Dropdown in Ihrem HTML:

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

Und stylen Sie das div so:

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

Inline anzeigen verhindert, dass das div zu einer neuen Zeile wechselt. Position absolut entfernt es aus dem Seitenfluss. Das Endergebnis ist eine schöne saubere Unterstreichung, die Sie nach Belieben gestalten können, und Ihr Dropdown-Verhalten verhält sich weiterhin wie erwartet.

0
devigner

Aus irgendeinem Grund ist es tatsächlich von der Farbe der Umrandung beeinflusst. Wenn Sie die Standardfarbe verwenden, bleiben die Ecken rund, aber wenn Sie die Farbe ändern, verschwindet auch die Rundung.

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

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

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

0
mcallahan