圓角純CSS技術

我一直在看這個問題的堆棧 - How to style a <select> dropdown with CSS only without JavaScript?，並想知道是否有可能使用這種技術使用圓角。圓角純CSS技術

在我作爲一個測試敲起來的例子中，這是不可能的，因爲選擇框似乎在背景中是perturde。我認爲這種技術對於獲得對盒子樣式的合理控制是合適的，同時仍然保持本地操作系統的支持，這是我在這種情況下所追求的。如果在這種技術中使用圓角很困難，那麼我會放棄它。

繼承人一個很好的jsfidle - http://jsfiddle.net/danield770/YvCHW/6/

我的CSS是目前這樣的事情。

.styled-select select { 
    background: transparent; 
    width: 268px; 
    font-size: 16px; 
    line-height: 1; 
    border: 0; 
    height: 28px; 
} 

.styled-select{ 
    padding: 0; 
    width: 240px; 
    height: 28px; 
    overflow: hidden; 
    background: url(images/drop.png) no-repeat right #fff; 
    border: 1px solid #ccc; 
}

來源

2013-01-20 David

這是很難理解你想要做什麼，但你是否知道邊界半徑的？ –

您可以使用border-radius添加圓角。 Reference

.styled{ 
    width: 120px; 
    height: 34px; 
    overflow: hidden; 
    background: url(http://www.stackoverflow.com/favicon.ico) no-repeat 96% #ddd; 
    border-radius: 10px; 
}

FIDDLE

來源

2013-01-20 17:19:40 Fee

工作對我來說，如果我只是在它應用border-radius。

.styled-select{ 
    border-radius: 10px; 
}

jsFiddle Demo

來源

2013-01-20 17:18:22 kapa

務必爲跨瀏覽器添加瀏覽器前綴;） –

@TomSarduy以下是[瀏覽器支持表]（http://caniuse.com/#feat=border-radius）。只有iOS Safari 3.2和Android Browser 2.1需要「-webkit」前綴。 – kapa

圓角純CSS技術

回答

相關問題