風格<select>角落爲webkit

我想要做的是使用「border-radius」圓角<select>。奇怪的是，webkit瀏覽器顯示<select>的白色背景溢出邊框。風格<select>角落爲webkit

更新這裏的截圖和我的代碼：

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 2012-04-12 08:58:29

-webkit-appearance:none可能會訣竅。

編輯：是的，似乎這樣做：http://jsfiddle.net/dbxjB/

來源

2012-04-12 09:07:02 keegan3d

'-webkit-appearance：none'有助於消除溢出，但它也會切斷select右側的按鈕圖像。對不起在我的問題中沒有提到這個事實。 – Natalia 2012-04-12 09:34:27

你在其他瀏覽器中看到你想要的嗎？我不確定你想要的最終結果是什麼。你是對的，這種方法刪除按鈕圖像，但你可以添加自己的：http://37signals.com/svn/posts/2609-customizing-web-forms-with-css3-and-webkit – keegan3d 2012-04-12 17:05:47

謝謝你的鏈接。 – Natalia 2012-04-13 07:38:15

爲select設置background-color似乎這樣的伎倆。

編輯：不。設置邊界爲1px做到了。例如2px虛線。出問題的。

來源

2012-04-12 09:10:50

風格<select>角落爲webkit

回答

相關問題