每天一道前端面试题--dataList与自定义dataList

最新推荐文章于 2025-04-06 18:40:07 发布

descire

最新推荐文章于 2025-04-06 18:40:07 发布

阅读量5.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS3 文章标签： html5 面试题前端 JavaScript

本文链接：https://blog.csdn.net/dai_qingyun/article/details/52856835

本文探讨HTML5的新控件datalist及其在不同浏览器中的表现差异，并分享如何模仿天猫搜索框来克服datalist的UI局限性。通过示例展示了自定义搜索框的实现，包括输入提示和事件监听的细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

###今天主要分享 ---- HTML5新控件datalist以及模仿天猫搜索框

####HTML新控件datalist的实际应用

  <div class="demo">
    <input class="goods" type="text" name="team" value="" list="listData" placeholder="search team">
    <datalist id="listData">
      <option value="ROX" label="Top1"></option>
      <option value="SKT1" label="Top2"></option>
      <option value="EDG" label="Top3"></option>
      <option value="RNG" label="Top4"></option>
    </datalist>
  </div>

乍一看，用起来也挺方便的，下面是效果图：

![image](http://o8sux93eg.bkt.clouddn.com/datalistChrome.png)

这是在chrome中的效果，如果你用firefox打开之后，你会得到想不到的结果，在firefox中如果option中的value和label多有值得话，它显示的是label。
是不是很坑！！所以只能显示单个标签的时候，差异就会变得很小了。不过还是有很多的差异。这里我推荐大家看一下张鑫旭的文章。

####模仿天猫搜索框
看了大神的文章，我们应该多知道了原生的datalist最大的局限性就是UI,所以我们何必不自己DIY一个呢。
前两天用天猫，留意到它的搜索框，于是自己动手弄了一下：
先让大家看一下效果图：

![image](http://o8sux93eg.bkt.clouddn.com/tmalsearch.png)

#####input的默认样式
首先它的input是重置了样式，比如原生input最显著的特点就是它那蓝色的外边.

  outline: 0;

其他的什么宽高的，自己调节一下。

#####input的placeholder的样式的修改，这里面要使用伪元素，而且各个厂商需要加前缀：

  .goods::-webkit-input-placeholder {
    /* WebKit browsers */
    color: rgb(213,213,213);
    font-size: 14px;
  }
  .goods:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: rgb(213,213,213);
    font-size: 14px;
  }
  .goods::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: rgb(213,213,213);
    font-size: 14px

最低0.47元/天解锁文章