Jquery 文本框单击事件时触发数据列表选项_Jquery_Html_Html Datalist

Jquery 文本框单击事件时触发数据列表选项

jquery html

Jquery 文本框单击事件时触发数据列表选项,jquery,html,html-datalist,Jquery,Html,Html Datalist,如何在单击相应的文本框时显示或触发数据列表选项？我有一个数据列表，上面有10个选项。在chrome中，会显示一个下拉图标，让用户知道它有一个下拉列表。但在firefox中，图标不可用。因此，用户可能不知道它是一个下拉列表，只是一个文本框。因此，我想在单击该文本框时显示数据列表选项。感谢您的帮助。也许解决方案是这样（）输入：：-webkit日历选择器指示器{ 显示：无；/*删除Chrome中的默认箭头*/ } 。所需时间：之后{ 内容：网址(http://s25.postimg.org/6k

如何在单击相应的文本框时显示或触发数据列表选项？

我有一个数据列表，上面有10个选项。在chrome中，会显示一个下拉图标，让用户知道它有一个下拉列表。但在firefox中，图标不可用。因此，用户可能不知道它是一个下拉列表，只是一个文本框。因此，我想在单击该文本框时显示数据列表选项。感谢您的帮助。

也许解决方案是这样（）


输入：：-webkit日历选择器指示器{
显示：无；/*删除Chrome中的默认箭头*/
}
。所需时间：之后{
内容：网址(http://s25.postimg.org/6k40u5hcr/arrow.png);
左边距：-20px；
填充：.1em；
指针事件：无；/*使png cliccable*/
}

首先，我用输入删除了chrome中的默认箭头：-webkit日历选择器指示器
在after元素中，我在content属性中设置了一个小图像
要使图像可单击，请使用指针事件：无
此解决方案适用于最新版本的Chrome、firefox和IE

如果此解决方案不适合您的需要，我很抱歉让您浪费时间。

这是一个无法修改的浏览器内置功能。在低于12.1或IE10的更低版本中，Safari也不支持

datalist

为了实现此功能，请使用以下polyfill:。这将为Safari和IE提供功能支持，并将

数据列表

转换为常规的

ul

列表，您可以轻松附加事件以显示/隐藏列表，而无需失去自动完成功能

<!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>