利用HTML5 的datalist 元素实现输入提示

你最喜欢的浏览器是： <input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

各浏览器对datalist的支持情况不一，Chrome没问题。

 

可以看出有个不足就是输入框有个下箭头，使之像个select，可以通过加CSS去掉（注：只对Webkit内核的浏览器有效）

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