<select>元素上“向下箭頭”的CSS？
[英]CSS for the “down arrow” on a <select> element?
問題描述
是否可以在下拉選擇元素上設置向下箭頭的樣式？ 即，（ <select><option>--></option></select> ）
我懷疑答案是否定的，因為IE處理特定元素的方式。 如果沒有辦法，有沒有人知道使用javaScript的'假'下拉框會模仿這種行為，但是我能夠自定義嗎？
11 個解決方案
解決方案1
49 2011-12-02 19:20:47
這里有一個很酷的CSS解決方案來設計下拉列表： http ： //bavotasan.com/2011/style-select-box-using-only-css/
基本上，將select包裝在容器div中，將select的樣式設置為比具有透明背景的容器寬18px，給溢出：隱藏到容器（切斷瀏覽器生成的箭頭），並添加風格化的背景圖像箭頭到容器。
在IE7（或6）中不起作用，但嚴重的是，我說如果你使用IE7，你應該得到一個不那么漂亮的下拉體驗。
解決方案2
12 已采納 2009-01-19 18:43:20
也許你可以使用jQuery selectbox替換 。 這是一個jQuery插件。
解決方案3
5 2009-01-19 18:44:53
不，向下箭頭是瀏覽器元素。 它在每個瀏覽器中內置[和不同]。 但是，您可以使用javascript將自定義下拉框替換為選擇框。
Jan Hancic提到了一個jQuery插件來做到這一點。
解決方案4
3 2009-01-19 18:44:35
下拉列表是平台級元素，您不能將CSS應用於它。
您可以使用CSS在其上疊加圖像，並在下面的元素中調用click事件。
解決方案5
3 2009-01-19 18:54:49
你不能使用CSS很好地組合組合。
FogBugz的人使用JavaScript制作了一個相當不錯的自定義組合，所以有可能，只需要做很多工作就可以做到。
最好堅持使用標准的版本1，然后看看一旦你的應用程序在野外是否值得更新它。
解決方案6
2 2009-01-19 18:44:47
我不知道它是否可以使用CSS（可能不在IE中），但請注意：不要使用javascript使用“假”下拉框，因為這些東西的可用性通常很糟糕。 除此之外，鍵盤導航通常不存在。
解決方案7
1 2014-07-07 11:43:56
你可以用CSS和你的向下箭頭作為一個絕對的圖像來實現這個目標，只需要一個“pointer-events：none;” 看我下面的例子：
<select>
<option value="1">1 Person</option>
<option value="2">2 People</option>
</select>
<img class="passthrough" src="downarrow.png" />
.passthrough {
pointer-events: none;
position: absolute;
right: 0;
}
解決方案8
0 2009-01-19 18:46:10
您需要使用隱藏的div和隱藏的輸入元素創建自己的下拉列表，以記錄哪個選項被“選中”。 我的猜測是@Jan Hancic發布的鏈接可能就是你想要的。
解決方案9
0 2011-02-14 12:57:54
試試這個
<div style='position:relative;left:0px;top:0px;
onMouseOver=document.getElementById('visible').style.visibility='visible'
id='hidden'>10
<select style='position:absolute;left:0px;top:0px;cursor:pointer;visibility:hidden;'
onMouseOut=document.getElementById('visible').style.visibility='hidden'
onChange='this.form.submit()'
id='visible' multiple size='3'>";
<option selected value=10>10</option>
<option value=20>20</option>
<option value=50>50</option>
</select>
</div>
解決方案10
0 2011-05-19 08:58:41
這將改變輸入，選擇等到舊樣式灰色不確定你是否可以操作之后：在<head> put：
<meta http-equiv="MSThemeCompatible" content="NO">
解決方案11
-1 2015-10-07 17:10:14
http://jsfiddle.net/u3cybk2q/2/檢查Windows，iOS和Android（iexplorer補丁）
.styled-select select { background: transparent; width: 240px; padding: 5px; font-size: 16px; line-height: 1; border: 0; border-radius: 0; height: 34px; -webkit-appearance: none; } .styled-select { width: 240px; height: 34px; overflow: visible; background: url(http://nightly.enyojs.com/latest/lib/moonstone/dist/moonstone/images/caret-black-small-down-icon.png) no-repeat right #FFF; border: 1px solid #ccc; } .styled-select select::-ms-expand { display: none; /*patch iexplorer*/ }
<div class="styled-select"> <select> <option>Here is the first option</option> <option>The second option</option> </select> </div>
在jQuery中使用向下箭頭鍵選擇其他元素底部的元素
[英]Select the element in the bottom of other elements with down arrow key in jQuery
使用Javascript（jQuery）使用箭頭鍵（上下）選擇li元素
[英]Select li element with arrow keys (up and down) using Javascript (jQuery)
如何添加向上箭頭以選擇元素以及向下箭頭以及僅使用這些箭頭來遍歷選項？
[英]How to add an up arrow to select element along with down arrow and to traverse options only using these arrows?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.