删除Chrome中的Datalist Dropdown Arrow

时间:2014-01-05 18:33:53

标签: html css html5 google-chrome

Chrome显然已向引用<datalist>的文字输入添加了一个下拉箭头。它出现在Chrome 34(Canary)中,但不在当前的稳定版本中(Chrome 31)。

仅在文本字段聚焦时显示(请参阅更新),并且应用于输入类型textsearch

就原生浏览器的实现而言,情况可能会更糟,但正如您在图片中看到的那样,它与我的设计规格相冲突。

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

6 个答案:

答案 0 :(得分:82)

感谢alexander farkas的评论,以下是删除箭头的样式规则:

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

答案 1 :(得分:6)

感谢Cantera。我不想完全摆脱黑色箭头,只是围绕它的灰色方块。

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

答案 2 :(得分:3)

var count = 3;
$http.get(BaseUrl().url + 'jury/UpcomingEvents?someID=' + someID)
     .success(function (response) {
         $scope.UpcomingEvents = response;
         $scope.hello= $scope.UpcomingEvents[0].EventID;
         $scope.Total= $scope.hello + Count
});

同样为我删除了箭头,我发现创建了更好的点击体验,仍然可以点击箭头所在的位置,甚至可以增加它的宽度和高度&gt; 1em并且在输入中可以放置自定义箭头作为背景图像,箭头将在那里。

答案 3 :(得分:1)

正如其他人所提到的,componentDidMount的作用是去除箭头,这也会影响BodyComponent上的html5 datepicker,

要删除 just ,删除数据列表输入将是:

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

答案 4 :(得分:0)

将父输入list选项设置为空, <input list="" ... />,例如:

<input
  list=""
  name="option"
  id="input"
  autocomplete="off"
>

<datalist id="datalist">
  <option>Carrots</option>
  <option>Peas</option>
  <option>Beans</option>
</datalist>

见 mdn customizing_datalist_styles example

答案 5 :(得分:-3)

尝试删除默认样式的-webkit-appearance: none