2016-02-04 200 views
9

我試圖讓datalist列表元素始終可見。作爲集中失敗後的標準,箭頭消失。如何使Datalist箭頭始終可見

我想有它總是這樣: 這裏是plunker:https://plnkr.co/edit/?p=preview

<input list="browsers" name="myBrowser" /> 
 
<datalist id="browsers"> 
 
    <option value="Chrome"> 
 
    <option value="Firefox"> 
 
    <option value="Internet Explorer"> 
 
    <option value="Opera"> 
 
    <option value="Safari"> 
 
</datalist>

enter image description here

環境:角指令

任何想法如何實現它?

最佳,

+1

是否有您使用的是datalist元素,而不是選擇一個原因? – JamieC

+0

Safari不支持datalist –

+0

[有沒有辦法在HTML5數據列表選項上應用CSS樣式?](http://stackoverflow.com/questions/13693482/is-there-a-way -to-apply-a-css-style-on-html5-datalist-options) – JamieC

回答

13

我有箭頭總是可見使用CSS:

input::-webkit-calendar-picker-indicator { 
 
       opacity: 100; 
 
      }
<input list="browsers" name="myBrowser" /> 
 
    <datalist id="browsers"> 
 
     <option value="Chrome"> 
 
     <option value="Firefox"> 
 
     <option value="Internet Explorer"> 
 
     <option value="Opera"> 
 
     <option value="Safari"> 
 
    </datalist>

+0

我將如何使用jQuery/Javascript設置該風格?我處於無法訪問CSS的情況(很容易)。 – abalter

+0

嗨。我無法使用jQuery進行設置。你可能看看這裏http://stackoverflow.com/questions/9438949/access-the-webkit-vendor-prefix-in-javascript – amol01

+2

@ amol01 Mozilla用戶的任何想法?你有'日曆選擇器指標'或兼容表你可以鏈接的任何參考頁? Tks – 4lackof