time 
设为首页】【收藏本站
当前位置: 主页 > WEB教程 > Html教程 > 【HTML5实践教程】3、使用css制作一个可伸缩的mobile的搜索框

【HTML5实践教程】3、使用css制作一个可伸缩的mobile的搜索框

时间:2012-11-23 00:34 点击:1326次 字体:[ ]




今天我将介绍如何使用css制作一个可伸缩的mobile的搜索框,他非常适合于mobile的响应式设计的需要。本教程没有使用JavaScript,只使用了原生css属性,所以这是一个非常简单而高效的实现。

  demo预览地址:http://webdesignerwall.com/demo/expandable-search-form/

 

  目的

  在移动设备上显示信息,要做到寸土寸金,珍惜每一寸的屏幕。例如搜索框的设计,在一般情况下处于收缩状态,激活的时候才将他扩展开来,这样做可以为屏幕上其他元素提供更多地显示区域。这就是本课程要完成的工作。我们先来看一个效果图:

【HTML5实践教程】3、使用css制作一个可伸缩的mobile的搜索框_www.fengfly.com

  在我的站点 Best Web Gallery 也有类似的设计,当查询按钮被点击的时候,触发jquery的focus事件用来渐入搜索框。

【HTML5实践教程】3、使用css制作一个可伸缩的mobile的搜索框_www.fengfly.com

 

  HTML代码

  下面的代码使用了html5的search标签:

<form>
    <input type="search" placeholder="Search">
</form>

 

  重新设置webkit默认搜索输入框

  默认的webkit输入框的风格如下:

【HTML5实践教程】3、使用css制作一个可伸缩的mobile的搜索框_www.fengfly.com

  为了移除默认效果,让他看起来更像一般的文字输入框,我们需要添加如下css:

 
  1. input[type=search] {  
  2.     -webkit-appearance: textfield;  
  3.     -webkit-box-sizing: content-box;  
  4.     font-family: inherit;  
  5.     font-size: 100%;  
  6. }  
  7. input::-webkit-search-decoration,  
  8. input::-webkit-search-cancel-button {  
  9.     display: none;  
  10. }  
 

 

  设置输入框样式

  我不会逐行讲解每条css语句,这里只强调几点。我默认设置的search的宽度是55px,当他在focus状态下会扩展,宽度变为130px。transition属性实现动画效果,Box-shadow用来在输入框上实现发光的效果。

【HTML5实践教程】3、使用css制作一个可伸缩的mobile的搜索框_www.fengfly.com

  例子B

  在demo B 中,搜索框被最小化了,只存在一个查询的icon而没有文字输入部分。我改变了search的padding和width属性,来显示一个完美的圆形的按钮。我还使用color:transparent来隐藏文本区域。

【HTML5实践教程】3、使用css制作一个可伸缩的mobile的搜索框_www.fengfly.com

 

  浏览器兼容

  他在所有主流的浏览器上运行正常,例如:Chrome, Firefox, Safari, and IE8+。但不支持ie7及更低版本浏览器,因为ie不能识别 search 输入框,并且也不支持:focus伪类。

 

  原文地址:http://webdesignerwall.com/tutorials/expandable-mobile-search-form



本文地址 : http://www.fengfly.com/plus/view-210413-1.html
标签: HTML5 css Mobile
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: