可扩展的移动设备上搜索表单
来源:阳光在线客户端    发布时间:2017-07-30 23:49:36

  -webkit-box-sizing: content-box;

  input::-webkit-search-decoration,

  web-designer-wall-search.png

  上面是一个简朴的HTML表单。运用了HTML5的输入标签。

  原文:Expandable Mobile Search Form 编译:飞鱼的声纳

  }

  款式化input元素(检察示例)

  font-family: inherit;

  指标

  前次尔写了一篇创立有关挪移装备上的导航的教程,本日我将战人人分享一个符合挪移装备战互动计划的否扩大的搜刮表单。这个技巧用到了CSS属性的负值,但不需要JavaScript战分外的标签,是十分简略战有用的设想简练搜刮表单的要领。

  display: none;

  因为CSS代码极度直白,以是尔此处没有做逐行表明。细致搜寻输入框的宽度配置为了55像素,而正在激活后会扩展到130像素。其中的transition属性是完成动画成效的技能。Box-shadow属性给input标签增添了发光的结果。

  正在Best Web Gallery上,尔运用了jQuery给搜刮表单到场了点击搜刮按钮时的淡入结果。

  input[type=search] {

  例子B(检察示例)

  若是您必要进一步认识border-radius或box-shadow属性,能够浏览《CSS3根基》这篇文章。

  为了移除了默许款式,让其看上去只是一个一般的笔墨地区,咱们增加以下CSS代码:

  这类否扩大的表单结果兼容所有的支流浏览器,比方Chrome, Firefox, Safari以及 IE8+。但不支持IE7及下列版本的浏览器,缘由是IE不支持: focus真类元素。

  style-search-input.png

  正在挪移设施上,每像素皆很重要。为了正在小空间内显现搜寻表单,会将表单计划的相对于简明,而后正在激活的时分扩大至齐宽度。如许便可能给其余界面元素大概内容地区腾出空间。您能够正在Web Designer Wall战Best Web Gallery上看到这类搜寻框。当您点击输入地区,它便会扩展到齐宽度。

  检察示例

  font-size: 100%;

  浏览器兼容性

  input::-webkit-search-cancel-button {

  重置默许的Webkit引擎高的Input款式

  正在默许环境高,以Webkit引擎为外围的浏览器的Input标签默许款式以下:

  webkit-search-input.png

  }

  best-web-gallery-search.png

  demo-b-css.png

  咱们最先:HTML代码

  正在示例B外,搜寻输入框进一步的最小化,只要搜刮图标显现进去,而不输入框。留神尔正在此处变动了输入框的内边距战宽度属性,目标是获得一个完善的圆形按钮。尔应用了color : transparent去让笔墨没有可见。

  -webkit-appearance: textfield;


阳光在线客户端 除注明原创以外,其余均来自互联网以及微信朋友圈,如有侵权请联系站长立即删除!
文章地址:http://www.51sozu.com/FWXX/20170730762.html



上一篇:4G手机50元,印度运营商又成“价格屠夫” 下一篇:好站推荐第三百二十四期:图标坊