input type="search"搜索的坑

<form action="" id="form">
         <input id="search" type="search" placeholder="请输入客户的手机或姓名" autocomplete="off">
</form>

submit事件要选择form元素

  $('#form').submit(function (e) {
    e.preventDefault()
    e.stopPropagation()
    search()
  }

设置input autocomplete="off"去掉弹出的下拉框;
将默认的“x”隐藏掉:

input[type="search"]::-webkit-search-cancel-button{
    display: none;
}

针对ios 设置样式, 去除ios下input 椭圆形:

-webkit-appearance: none;

使用css3新增的属性来控制input[type=search]

::-webkit-input-placeholder
::-webkit-search-cancel-button

重写占位符样式

input[type=search]::-webkit-input-placeholder{
    color: blue;
}

重写后面的小×样式

 input[type=search]::-webkit-search-cancel-button{
    -webkit-appearance: none;//此处只是去掉默认的小×
}
input[type=search]::-webkit-search-cancel-button{
    -webkit-appearance: none;

    position: relative;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: #EBEBEB;
}

input[type=search]::-webkit-search-cancel-button:after{
    position: absolute;
    content: 'x';
    left: 25%;
    top: -12%;
    font-size: 20px;
    color: #fff;
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 因为有机会参与一个项目的早期设计,因此搭建的时候不可避免的遇到了如何满足响应式的问题。翻阅了《响应式Web设计:H...
    tangyefei阅读 6,443评论 2 90
  • 笔记参考自《响应式Web设计:HTML5和CSS3实践》,2013年出版内容说不上最新。如下是全书的章的目录:第 ...
    于晓鱼阅读 945评论 0 1
  • 欲实现一个文字搜索的功能,要求输入时,键盘回车按钮提示显示为“搜索”。效果如下: 开始~input type=te...
    evelynlab阅读 18,570评论 0 7
  • 2017年5月19日晚上11点多,还在和闺蜜煲电话粥。我告诉了她我要去参军的决定,她的惊讶中带着几分质疑,...
    穆妍曦阅读 461评论 0 1