移除Chrome中的Datalist下拉箭頭

Chrome顯然在引用<datalist>的文本輸入中添加了下拉箭頭。它出現在Chrome 34（加納利）中，但不在當前的穩定版本（Chrome 31）中。移除Chrome中的Datalist下拉箭頭

似乎只有當文本字段被聚焦（參見更新）並且被施加到兩個輸入類型text和search。

本地瀏覽器實現可能會更糟，但正如您在圖像中看到的，它與我的設計規範相沖突。

enter image description here

有誰知道如何刪除或替換此新功能？

<datalist id="list"><option value="foo"><option value="bar"></datalist> 
<input type="text" list="list" name="field" maxlength="50" autocomplete="off" spellcheck="off" placeholder="Jump To">

更新：

當現場懸停（不只是集中），不幸的是還具有當按鈕本身懸停自己的背景顏色的箭頭也出現：

enter image description here

來源

2014-01-05 cantera

我還沒看，但這應該很簡單。進入dev console啓用shadowdom並檢查輸入元素的陰影。然後你會看到箭頭元素，包括他的僞類，它可以是一個僞元素，像'input :: - webkit-list-arrow'。 –

多虧了alexander farkas的評論，這裏是樣式規則刪除箭頭：

input::-webkit-calendar-picker-indicator { 
    display: none; 
}

來源

2014-01-06 01:28:24 cantera

聖球非常感謝你。讓我瘋狂 – Jason

我將它與：hover和：focus選擇器結合使用，只在用戶點擊輸入時才顯示。讓它更明顯一點，它是可選的自由文本，而不是僅下拉控件。 –

-3

嘗試-webkit-appearance: none應該刪除默認樣式

來源

2014-01-05 18:35:24 jmore009

不幸的是，並沒有刪除箭頭; '外觀同樣如此：沒有' – cantera

感謝坎特拉。我不想完全擺脫黑色箭頭，只是圍繞它的灰色方形。

input::-webkit-calendar-picker-indicator { 
    background-color: inherit; 
    }

來源

2016-12-09 22:17:30

爲什麼不'background-color：transparent'？ –

input::-webkit-calendar-picker-indicator { 
    opacity: 0; 
}

也去掉了箭頭對我來說，我發現創建一個更好的點擊體驗到靜止點擊其中的箭頭會是這樣，你甚至可以增加它的寬度和高度> 1EM和輸入也許把一個自定義的箭頭作爲背景圖像，箭頭就是這樣。

來源

2017-09-09 03:40:21 dmartins

移除Chrome中的Datalist下拉箭頭

回答

相關問題