HTML 5中使用DataList标签

2020-06-19216次阅读html5
<input list="browsers" name="myBrowser" class="testinput">
<datalist id="browsers">
	<option value="Chrome">
	<option value="Firefox">
	<option value="Internet Explorer">
	<option value="Opera">
	<option value="Safari">
</datalist>

<datalist>标签定义选项列表。请与input元素配合使用该元素,来定义input可能的值。

datalist及其选项不会被显示出来,它仅仅是合法的输入值列表。

请使用input元素的list属性来绑定datalist。

浏览器支持

所有主流浏览器都支持<datalist>标签,除了Internet Explorer和Safari。

 

下拉箭头显示与隐藏

其实input标签中可以始终显示下拉箭头表示可选datalist数据列表。不过要给input添加如下样式:

::-webkit-calendar-picker-indicator {
   opacity: 100;
}

隐藏下拉箭头:

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

 

上一篇: 使用Web动画API播放粒子动画  下一篇: scroll-margin-top应用  

HTML 5中使用DataList标签相关文章