首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >iOS自定义键盘搜索键

iOS自定义键盘搜索键

作者头像
libo1106
发布2018-08-08 15:58:34
1.2K0
发布2018-08-08 15:58:34
举报
文章被收录于专栏:Web 开发Web 开发

之前知道HTML5的input属性,新增了一种type=search。当系统焦点在input[type=search]元素上时,iOS会自动更改键盘的确认按键为搜索,且按下后自动收齐键盘。

但是我尝试了一次,一直不成功,最后发现,原来是姿势不对。

input[type=search]必须放在一个form标签中,才会更改iOS键盘的效果。

<div class="mod_search">
  <form>
    <input type="search" name="search" id="search" placeholder="Search" autosave="unique">
  </form>
</div>

效果如下图:

input[type=search]
input[type=search]

还能通过一些webkit私有属性,自定义这个搜索框的样式,例如右边的XX,或者placeholder字体颜色等。

input[type="search"]::-webkit-input-placeholder {
  color: orangered; 
}
input[type="search"]::-webkit-search-cancel-button {
  /* Remove default */
  -webkit-appearance: none;
 
  /* Now your own custom styles */
  height: 10px;
  width: 10px;
  background: red;
  /* Will place small red box on the right of input (positioning carries over) */
}

更多玩法,可以这篇文章:http://css-tricks.com/webkit-html5-search-inputs/

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2014-04-152,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档