HTML5+CSS3打造可自动获得焦点和支持语音输入的超酷搜索框
着HTML5的深入人心，越来越多的新功能得以应用。HTML5与CSS3相结合可以非常简单的实现很多超酷的效果。本文为您讲解使用HTML5和CSS3打造自动获得焦点、支持语音输入的超酷的搜索框。
?
?HTML我们在页面中放置一个搜索表单form，在表单中分别有一个输入框以及一个搜索按钮。
<form?action="#"?method="get"?class="search_form">?????<input?type="text"?name="s"?class="sinput"?placeholder="输入?回车搜索"?autofocus?x-webkit-speech>??????<input?type="submit"?value="搜索"?class="sbtn">?</form>?细心的您会发现输入框input中多了三个属性，分别是placeholder，autofocus，x-webkit-speech，它们有着不同的作用。
placeholder：是为了设置初始值，并且这个初始值的颜色为灰色，当输入框input的内容变动时，这个值就消失。
autofocus：自动聚焦，当进入当前页面时，这个搜索输入框会自动获取焦点，而你可以在打开页面后直接输入关键字按回车键进行搜索。当autofocus出现两次以上的时候，浏览器会选择最后一个带有autofocus属性的输入框input聚焦。
x-webkit-speech：webkit核的浏览器（如Chrome）特有的语音识别工具，使用x-webkit-speech后，在输入框的右侧会出现一个小话筒，点击话筒，会提示“请开始说话”，用户可以通过麦克风输入语音，浏览器会自动识别语音内容，并将识别的结果显示在输入框中。
以前需要借助一大段Javascript代码来实现的聚焦和输入光标移开输入框的交互效果，而使用HTML5则只需要设置几个属性一切就OK了。
CSS单单只是设置属性和实现功能还不够，我们可以用CSS3来对搜索框进行美化，让它更有亲和力。
.search_form{position:relative;?height:31px;?margin:60px;display:inline-block;}?.search_form:hover{-webkit-box-shadow:0?0?3px?#999;-moz-box-shadow:0?0?3px?#999}?.sinput{float:left;?width:200px;?height:21px;?line-height:21px;?padding:4px?7px;?color:b3b3b3;??border:1px?solid?#999;?border-radius:2px?0?0?2px;?background-color:#fbfbfb;}?.sbtn{float:left;?width:50px;?height:31px;?padding:0?12px;?margin-left:-1px;??border-radius:0?2px?2px?0;?border:1px?solid?#4d90fe;?background-color:#4d90fe;?cursor:pointer;??display:inline-block;?font-size:12px;?vertical-align:middle;?color:#f3f7fc;position:absolute;}?.sbtn:hover{background:#4084f2}?