在文本框的单击事件上触发datalist选项 [英] trigger datalist options on click event of text box
问题描述
如何在单击相应的文本框时显示或触发datalist选项？
我有一个数据列表，其选项为10.在chrome中，会显示一个下拉图标，允许用户知道它有一个下拉列表。但是在Firefox中，图标不可用。因此，用户可能不知道它是一个下拉菜单而只是一个文本框。所以我想在点击该文本框时显示datalist选项。任何帮助表示赞赏。
How to show or trigger the datalist options on clicking of its corresponding text box? I have a datalist with options say 10. In chrome,a dropdown icon is shown allowing the user to know it has a dropdown list. But in firefox,icon is not available.Hence,the user may not be aware that it is a dropdown and just a text box .So i want to show the datalist options on click of that text box. any help appreciated.
推荐答案
也许解决方案可能是这个（小提琴）
Perhaps a solution might be this (Fiddle)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
input::-webkit-calendar-picker-indicator {
display: none;/*remove default arrow in Chrome*/
}
.required:after {
content: url(http://s25.postimg.org/6k40u5hcr/arrow.png);
margin-left: -20px;
padding: .1em;
pointer-events:none;/*make png cliccable*/
}
</style>
</head>
<body>
<span class="required"><input id="team" list="bestTeam"></span>
<datalist id="bestTeam">
<option value="Inter">
<option value="Milan">
<option value="Juve">
<option value="Roma">
</datalist>
</body>
</html>
首先，我删除了chrome中的默认箭头，输入:: - webkit-calendar-picker-指标
in after element我在内容属性中设置一个小图像
使图像可点击使用指针 - 事件：无
此解决方案有效在最新版本的Chrome，firefox和IE上
如果这个解决方案不适合您的需求，我为让您浪费时间而道歉。
First of all i removed the default arrow in chrome with input::-webkit-calendar-picker-indicator
in after element i set a small image in content property
to make the image clickable use pointer-events:none
This solution works on the latest versions of Chrome, firefox and IE
If this solution does not suit your needs, i apologize for making you lose time.
这篇关于在文本框的单击事件上触发datalist选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
