IvanlIsh IvanlIsh - 3 months ago 29
HTML Question

How to remove the drop-down icon in input element with list attribute?

In HTML5,

<input>
element has a new attribute
list
, when I add this icon there will auto add a drop-down icon. How can I change the style of this icon or just remove it.

Also, I want an action that
<input>
element be focused but no text inputted, all the element in
<datalist>
be showed, how to achieve it?

<input list="test-list" type="text">
<datalist id="test-list">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
</datalist>

Answer Source

You're looking for the peusdo-element ::-webkit-calendar-picker-indicator:

input::-webkit-calendar-picker-indicator {
  display: none;
}
<input list="test-list" type="text">
<datalist id="test-list">
    <option value="1"></option>
    <option value="2"></option>
    <option value="3"></option>
</datalist>

However, it's worth mentioning that <datalist> has ridiculously bad support, so you'd probably be better off just using a simple <select>, which allows for styling through use of background:

select {
  width: 268px;
  padding: 5px;
  font-size: 16px;
  line-height: 1;
  border: 0;
  border-radius: 5px;
  height: 34px;
  background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
  -webkit-appearance: none;
  background-position-x: 244px;
}
<select>
  <option value="0" selected="selected">Browser</option>
  <option value="1">IE</option>
  <option value="2">Firefox</option>
  <option value="3">Opera</option>
  <option value="4">Safari</option>
</select>

Hope this helps! :)