Style <select> Ecken für Webkit

Was ich versuche zu tun ist, um Ecken eines <select> mit "Border-Radius" zu runden. Seltsamerweise zeigen Webkit-Browser weißen Hintergrund überlaufende Grenzen der <select>.Style <select> Ecken für Webkit

aktualisieren Hier ist der Screenshot und mein Code:

enter image description here

HTML:

<select class="rounded_select"> 
    <option>rounded_select</option> 
</select>

CSS:

.rounded_select { 
    border-top: 2px solid #ccc; 
    border-left: 2px solid #ccc; 
    border-bottom: 2px solid #eee; 
    border-right: 2px solid #eee; 
    border-radius: 10px; 
}

Gibt es irgendwelche Ideen, wie es zu beheben ?

Update: Es ist vorzuziehen, die Schaltfläche Bild auf der rechten Seite der Auswahl zu speichern.

Quelle

2012-04-12 Natalia

bitte etwas Code zum besseren Verständnis zeigen – sandeep

-webkit-appearance:none könnte den Trick tun.

EDIT: Yep, das es zu tun scheint: http://jsfiddle.net/dbxjB/

Quelle

2012-04-12 09:07:02 keegan3d

'-Webkit-Aussehen: keine' hilft, Überläufe loszuwerden, aber es schneidet auch die Schaltfläche Bild auf der rechten Seite der Auswahl. Tut mir leid, dass ich diese Tatsache in meiner Frage nicht erwähnt habe. – Natalia

Siehst du, was du in anderen Browsern willst? Ich bin mir nicht sicher, was das Endergebnis ist, das du willst. Sie haben Recht, dass dieser Ansatz das Buttonbild entfernt, aber Sie können Ihr eigenes hinzufügen: http://37signals.com/svn/posts/2609-customizing-web-forms-with-css3-and-webkit – keegan3d

Vielen Dank für die Verknüpfung. – Natalia

Einstellung background-color für die select scheint den Trick zu tun.

Edit: Nicht. Das Einstellen der Grenze auf 1px hat es getan. Sowie 2px zum Beispiel gestrichelt. Glitchie.

Quelle

2012-04-12 09:10:50

Style <select> Ecken für Webkit

Antwort

Verwandte Themen