trigger datalist options on click event of text bo

2020-06-29 06:50发布

站内问答 / jQuery
742 2 4

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.

2条回答
地球回转人心会变
2楼-- · 2020-06-29 06:51

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>

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.

查看更多
0人赞 添加讨论(0) 举报
来，给爷笑一个
3楼-- · 2020-06-29 07:14

That is a browser built-in feature that can't be modified. Also datalist isn't supported by Safari in versions lower than 12.1 nor lower versions of IE10

In order to accomplish this functionality use this polyfill: webshim. This will give feature support to Safari and IE- and convert the datalist into a regular ul list that you can then easily attach events to display/hide the list without loosing the autocomplete functionality.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)