web-dev-qa-db-ja.com

Chromeのデータリストのドロップダウン矢印を削除

Chromeは<datalist>を参照するテキスト入力にドロップダウン矢印を追加したようです。 Chrome 34（Canary）に表示されますが、現在の安定ビルド（Chrome 31）には表示されません。

テキストフィールドがフォーカスされている場合のみ表示され（更新を参照）、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

htmlcsshtml5google-chrome
45
cantera

alexander farkas によるコメントのおかげで、矢印を削除するためのスタイルルールがあります。

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

カンテラに感謝します。黒い矢印を完全に取り除きたくはありませんでした。それを囲む灰色の正方形だけを取り除きました。

input::-webkit-calendar-picker-indicator {
  background-color: inherit;
  }
7
Toby Belch
input::-webkit-calendar-picker-indicator {
  opacity: 0;
}

また、私のために矢印を削除しましたが、矢印のある場所をクリックするためのより良いクリック体験を作成し、その幅と高さを1em以上も増やすことができ、入力にカスタム矢印を背景画像として置くことができます矢印のある場所。

3
dmartins

他の人が::-webkit-calendar-picker-indicator { display: none }が矢印を削除することで言及しているように、それは<input type="date">のhtml5 datepickerにも影響を与えます。

justを削除するには、データリスト入力を削除します。

[list]::-webkit-calendar-picker-indicator { display: none; }

2
jnowland