首页

关于

如何建立一个样式新颖的CSS3搜索框

如何建立一个样式新颖的CSS3搜索框

在线演示

搜索框大概是web开发中最常用的UI元素之一,我想基本没有必要去介绍如何使用它。无论是网站还是web应用,都会为了增强用户体验而添加它,那么你是不是也想过设计一个别致的搜索框?

在今天的文章中,大家将会学到如何使用伪元素来创建一个超酷的CSS3搜索框。当然在开始介绍前你也可以 下载源代码或者查看在线演示

HTML举例:

正如接下来你所看到的,标记很少,并且很容易理解:

<form class="form-wrapper cf">
        <input type="text" placeholder="Search here..." required>
        <button type="submit">Search</button>
</form> 

你可能注意到了HTML5的特殊属性,像placeholder和required,简介如下:

.placeholder-基本上,这个属性的作用在于当文本框获得焦点之前,先在文本框里显示一个域的信息,直到获得焦点后,域的信息被隐藏。

.required-这个属性说明了当前元素是表单提交中的一个必需属性。

HTML5也给我们带来了一个新的type属性:type="search"。

小贴士:HTML…

标签: css3, 搜索框, search box, 创建搜索框

阅读更多

标签

© Copywrite by gbin1.com, all rights reserved.