HTML5实践 -- 可伸缩的mobile搜索框

2024-05-14 00:21:45

　　转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/20/2779845.html

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

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

　　目的

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

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

　　HTML代码

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

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

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

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

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

input[type=search] {-webkit-appearance: textfield;-webkit-box-sizing: content-box;font-family: inherit;font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {display: none;
}

　　设置输入框样式

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

　　例子B

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

　　浏览器兼容

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

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

HTML5实践系列

转载于:https://www.cnblogs.com/softlover/archive/2012/11/20/2779845.html

HTML5实践 -- 可伸缩的mobile搜索框相关推荐

电商项目实战第二节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【搜索框那一栏】
上一节:电商项目实战第一节: CSS3+HTML5+JS 设计案例[考拉海购网站]之[顶部导航] 文章目录 [考拉海购网站]之[搜索框那一栏] 第一步,分析布局第二步,在html代码里面补全需要的标 ...
html5搜索框在最右侧,html5搜索框特效点击搜索框弹出分类搜索框代码
特效描述:html5搜索框特效点击搜索框弹出分类搜索框.点击搜索框弹出分类搜索框代码代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Search People Sara Soue ...
html5搜索框美化,CSS美化的漂亮搜索框
CSS美化的漂亮搜索框我要搜索搜索 var $ = function(id){return document.getElementById(id);} var formSubmit = funct ...
可伸缩搜索框旋转实现loading
以前在花瓣上看到的一个搜索框交互效果,找不到了.搜索标志获得焦点的时候拉伸成搜索框,失去焦点的时候缩回搜索标志,输入内容回车,则会先缩回搜索标志,而后旋转模拟loading.DEMO下载效果如图: - ...
Html5表单元素-搜索框和上传文件框
1.search - 搜索框 element/form/input/search.html <!doctype html><html><head> <titl ...
html5 input搜索框样式修改,修改input搜索框默认叉号的样式为自定义图片
兼容IE的自定义input搜索框叉号样式(使用图片替换input原生叉号) 代码 input::-webkit-search-cancel-button { -webkit-appearance: n ...
【Vue实践】列表搜索框中模糊搜索功能的两种实现方式
文章目录 1.Demo演示 2.HTML结构 3.实现 3.1 基于计算属性`computed`实现 3.2 基于侦听器`watch`实现 1.Demo演示模糊搜索功能是日常开发中常见的一种功能,这 ...
html5搜索框在最右侧,CSS3,HTML5和jQuery搜索框集锦
添加搜素框或网站搜索功能是为了方便用户能够轻松.快捷地找到自己需要的信息.因此,在网站中添加一个搜索框已经成为网页设计的主流元素之一.添加一个搜索框到网站会使得用户界面更加友好,也能帮助用户轻松愉快地 ...
outlook 搜索框_日程管理，用 Outlook 也行
在学校和日常生活中,我通过手机上的 App 和网络上的服务来帮助我提高效率.管理日程.然而,所在公司对于第三方软件和服务的限制越来越多,能够使用的软件也仅限于 Windows 10 系统自带的基本软件 ...
在搜索框自动输入文本_Selenium 时间搜索框查询和日期大小比较
在做Selenium自动化的时候,会遇到时间搜索框查询(如下图)并比较查询结果是否在输入的时间之类的问题. 要想解决这个问题,首先,第一步要做的就是选择时间,并获取到所选时间的文本信息. 如上图所示, ...

最新文章

热门文章