`

HTML5+CSS3打造可自动获得焦点和支持语音输入的超酷搜索框

 
阅读更多 
<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>请使用支持HTML5的现代浏览器。使用chrome可以体验语音搜索效果。</title>
<style type="text/css">
	.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} 
</style>
</head>

<body>
<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> 
</body>
</html>
分享到：
| html5配合css3实现带提示文字的输入框
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics