621071874css3

程序员眼中CSS3：尽管现代浏览器已经支持了众多的CSS3属性，但是大部分设计师和开发人员貌似依然在关注于一些很“主流”的属性，如border-radius、box-shadow或者transform等。它们有良好的文档、很好的测试并且最常用到，所以如果你最近在设计网站，你很难能脱离它们。今天我就给大家分享一下如何用CSS3制作SerachBox，并且还有详细的步骤分析，让你知道CSS3有哪些强大的功能。当然，在这篇文章中，您将和我一起见证一件事情——如何使用HTML5的占位符（placeholder）属性和CSS3来创建一个超酷而又实用的搜索框。由于“placeholder”是HTML5中的一个新属性，对于部分浏览器是不支持的，如果您想在不支持这个新属性的浏览器中使用这个属性，你可以考虑使用Modernizr的检测功能。其实，隐藏在浏览器的大宝库中是一些高级的、被严重低估的属性，但是它们并没有得到太多的关注。或许它们中的一些应该这样(被无视)，但是其它的属性应该得到更多的认可。最伟大的财富隐藏在Webkit的下面，而且在iPhone、iPad和Android apps的时代，开始了解它们会灰常有用。就连Firefox等使用的Gecko引擎，也提供了一些独特的属性。在本文中，我们将看一下鲜为人知的CSS 2.1和CSS3属性以及它们在现代浏览器中的支持情况。

SearchBox

Gecko引擎图标

当然，在分享这边文章之前，在这里推荐一下我自己的前端群：621071874，不管你是小白还是大牛，小编我都挺欢迎，不定期分享干货以及各种经典案例，包括我自己整理的一份2017最新的前端资料和零基础入门教程，同时，还会定期和大家共同讨论目前企业需求以及各类面试问题，并且还会有技术讨论和疑难解答，欢迎初学和进阶中的小伙伴。

HTML Markup

这个结构很简单，我们使用了一个“form”元素，并且应用一个“div.formFiled”来包住“input.search”的输入框和一个“input.btn”的Button。如下图所示：

3个要素

根据上图我们能很快的写出他的HTML结构：

源码部分示意图

上面结构中的“input type="text"”的value属性，我使用了HTML5的“placeholder”占位符属性著作权归作者所有。

或许有朋友会问，这里加个“div.formFiled”没什么作用嘛，其实可以说在此处可有可无的，我主要放他有一个原因，让“input.search”和“input.btn”结构更紧凑，加上可以起到清除浮动的作用，如果表单具有多元素这样的横排元素，这种结构会趋向于完养美化。这只是我个人意见，仅供参考。当然有的同学也会问，不是CSS3来制作吗？那为何还定义那么多类名和ID名做什么？不是吃多了没事做吗？因为在CSS3中有属性选择器之类的使用，完全可以取代这些类名和ID。其实说的一点也没有错，不过我在此处是为了考虑不支持属性选择器的浏览器，也能具有一定的效果。

CSS Code

我想大家都不关注结构是怎么写更合理，因为这个太简单了，也太常见了，大家想了解的是怎么使用CSS王3来制作上图的SearchBox效果。其实不难只是代码长一点，下面我主要分以下几个过程，用代码和图片来剖析SearchBox整个制作过程，首先我们来看最初效果：

SearchBox

Form容器：

源码

写上上面的代码后，我们就能看到土“form”容器的效果了：

SearchBox

这样一来有了渐变的背景、阴影，圆角效果，为了让他更具完美一点，我们使用“:before”给整个“form”容器底部制作一个半透明的效果：

源码

就会变成自带半透明的低透的SearchBox：

注意看和前面有什么区别

美化inputs：

这里我们一共有俩个input，一个是输入框“input[type="text"]”，另一个是“input[type="submit"]”，接下来就是需要对这两个元素进行样式的修改，这里有一个小技巧告诉大家：我们给元素加了“float:left”时就不需要在给元素加“display:block”。详情可以点击float。下面我们一起来看这两个元素的样式代码：

源码GIF

效果：

SearchBox

HTML5的placeholder属性

这个“placeholder”是HTML5的一个新产物，俗名叫“占位符”，所起的功能就类似于我们的输入框在得到焦点时，时面的默认值会变成空白，当失去焦点时又会显不默认的文本，我想大家一定使用“jquery”制作过这样的效果。因为他是HTML5的新属性，所以只有在Mozilla Firefox 3.7+、Apple Safari 4+、Google Chrome 4+、Opera11+等现代浏览器支持。在Mozilla Firefox 3.7+、Apple Safari 4+、Google Chrome 4+这些浏览器下，你还可以给这个“placeholder”加上样式：

但是在Opera11+还是无法为他定义样式。

大家都知道，有些浏览器不支持这个“placeholder”属性，但我们可以使用jQuery等言法来实现。我在这里使用了Modernizr直接检测浏览器是否支持HTML5的“placeholder”属性。这个Modernizr是很强大的，因为它能够让您使用更多的HTML5元素和CSS3样式，曾经有人就说Modernizr是为HTML5和CSS3而生的。下面我们来看一下简单的应用：

先在你的项目中调用

接着在样式中加上一个“.placeholder”样式

最后我们就需要借助一段jQuery代码来实现他的兼容问题

DOM的SearchBox源码：

GIF

整个SearchBox的代码思路就是这样啦，如有兴趣你也可以试着自己做一下。