スタイルウェブキットのコーナー

私がしようとしているのは、「border-radius」を使用して<select>の角を丸くすることです。不思議なことに、Webkitブラウザは、<select>の白い背景の溢れている境界線を示しています。スタイルウェブキットのコーナー

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; 
}

それを修正するためにどのように任意のアイデアがあります？

更新：選択の右側にボタンイメージを保存することが好ましいです。

出典

2012-04-12 Natalia

理解を深めてください。 – sandeep

-webkit-appearance:noneトリックを行う可能性があります。

EDIT：うん、それを行うには表示されます。http://jsfiddle.net/dbxjB/

出典

2012-04-12 09:07:02 keegan3d

'-webkit-appearance：none'はオーバーフローを取り除くのに役立ちますが、selectの右側のボタンイメージも切り捨てます。私の質問でこの事実を言及していないため申し訳ありません。 – Natalia

他のブラウザで何が欲しいのですか？私は、最終結果があなたが望むものが何であるか分かりません。あなたはこの方法でボタン画像を削除することは間違いありませんが、自分で追加することができます：http://37signals.com/svn/posts/2609-customizing-web-forms-with-css3-and-webkit – keegan3d

ありがとうリンク。 – Natalia

selectためbackground-colorを設定するには、トリックを行うようです。

編集：しません。境界を1ピクセルに設定しました。同様に2pxが破線で表示されます。グリッチ。

出典

2012-04-12 09:10:50

スタイルウェブキットのコーナー

答えて

関連する問題