CSS - 使用SELECT標籤時下拉框的Border Radius？不是SELECT輸入它自己，實際下拉框？

我試圖設計一個選擇下拉框。CSS - 使用SELECT標籤時下拉框的Border Radius？不是SELECT輸入它自己，實際下拉框？

到目前爲止，我已經通過將特定樣式應用於選擇標籤，在下拉框本身（帶有選項的下拉框）中實現了樣式化效果。

這是迄今爲止我已經使用了CSS：

input, select { 
    background: #fcfcfc; 
    padding: 7px 25px; 
    border: 0 none; 
    font: bold 12px Arial,Helvetica,Sans-serif; 
    color: #6a6f75; 
    -webkit-border-radius: 20px; 
    -moz-border-radius: 20px; 
    border-radius: 20px; 
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); 
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; 
    -moz-box-shadow: , 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; 
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; 
    -webkit-background-clip: padding-box; 
    -webkit-transition: all 0.7s ease-out 0s; /* Saf3.2+, Chrome */ 
    -moz-transition: all 0.7s ease-out 0s; /* FF4+ */ 
    -ms-transition: all 0.7s ease-out 0s; /* IE10? */ 
    -o-transition: all 0.7s ease-out 0s; /* Opera 10.5+ */ 
    transition: all 0.7s ease-out 0s; 
} 

select { 
    padding: 7px 10px; 
} 

input:focus, select:focus 
{ 
    background: #6699cc; 
    color: #e7f3ff; 
    text-shadow: 
     -1px -1px 0 #666, 
     1px -1px 0 #666, 
     -1px 1px 0 #666, 
     1px 1px 0 #666; 
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; 
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; 
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; 
}

這個CSS適用於輸入，並使用標籤的特定頁面中找到。

現在，這樣做的風格在焦點事件的下拉框，與背景轉換爲藍色（在Firefox中工作）我想要做的，但是添加一個彎曲的邊框到下拉框，以便它與選擇輸入本身融合更多。

這將實現的效果是這樣的：

(Choose) 
(Option) 
| Option | 
(Option)

與此相比（請原諒我的原油例子）：

(Choose) 
| Option | 
| Option | 
| Option |

我不知道這是可能的，甚至還，因爲我已經應用到select標籤的背景樣式正在生效，但是border radius樣式僅適用於SELECT輸入本身，而不適用於下拉框。

會有人在這方面有更多的知識，請花幾分鐘來啓迪我？

是否可以在下拉框中添加曲線邊框，還是僅可以使用曲線邊框設置SELECT輸入的樣式？

來源

2012-01-19 Craig van Tonder

您將無法使用標準HTML表單元素來實現此SELECT DROPDOWN樣式，您必須用DIV非表單元素「替換」下拉列表/ select，然後將所選值更新爲隱藏表單元素或隱藏的選擇下拉菜單。

如果你以某種方式想要它，它不會跨瀏覽器兼容。

一個jQuery替代品的一個例子是在這裏：https://stackoverflow.com/a/8450718/158014

來源

2012-01-19 14:47:51 Jakub

謝謝您的意見！正如你給了我一個好主意背後的靈感:) –

由於@jakub mentionned，你將不能夠使用的樣式和<select>標籤<option>您選擇下拉菜單。

這就是爲什麼我曾把這個jQuery插件：jQuery.simpleselect

它複製了HTML <select>的使用div的，這樣就可以樣式任何你想要的行爲，但是你想要的。而且它真的很容易使用：

HTML

<select id="the_select" name="the_select"> 
    <option value="1">One</option> 
    <option value="2" selected="selected">Two</option> 
    <option value="3">Three</option> 
    <option value="4">Four</option> 
</select>

$("#the_select").simpleselect();

的JavaScript的這條線將改變你的常規<select>到HTML低於

<div class="hidden_select_container"> 
    <select id="the_select" name="the_select" class="simpleselected"> 
    <option value="1">One</option> 
    <option value="2" selected="selected">Two</option> 
    <option value="3">Three</option> 
    <option value="4">Four</option> 
    </select> 
</div> 
<div class="simpleselect" id="simpleselect_the_select"> 
    <div class="placeholder">Two</div> 
    <div class="options"> 
    <div class="option">One</div> 
    <div class="option">Two</div> 
    <div class="option">Three</div> 
    <div class="option">Four</div> 
    </div> 
</div>

這種行爲具有多重優勢：

您保持定期編寫<select> S，所以，如果有一天你想停止使用該插件，你沒有任何HTML更新
的<select>是與<div>條取代的，所以它是完全設置樣式
的<select>是隱藏的，不會被刪除：如果表單提交，選擇的值將被提交像它應該是一個普通<select>

文件和下載：jQuery.simpleselect

來源

2012-09-20 17:45:58 Pioul

CSS - 使用SELECT標籤時下拉框的Border Radius？不是SELECT輸入它自己，實際下拉框？

回答

相關問題