css点击自动位置,CSS3仿苹果搜索框鼠标点击自动伸长

CSS3仿苹果网站的搜索框，鼠标点击输入框的时候搜索框自动伸长。代码中一共演示了三种不同效果的搜索框特效，不过大同小异，有的是鼠标点击时候高亮显示，有的是点击后拉升输入框，好像很智能的样子，没有使用其它的JS插件，完全CSS3自己的代码实现的，请在火狐或Chrome下看效果。

CSS3仿苹果网站的搜索框效果

body{font: 12px/1.2 Arial,Helvetica,san-serif;margin: 0;}

a: link,

a: visited{text-decoration: none;color: #416CE5;}

h2{font-size: 13px;margin: 15px 0 0 0;}

header{background: #36281B;box-shadow: 0 -15px 15px rgba(0,0,0,0.2)inset;clear: both;height: 90px;min-width: 1000px;width: 100%;border-bottom: 5px solid #6e6151;}

#header{clear: both;width: 100%}

section#masthead{margin: 0 auto;width: 1000px}

#site-title{float: left;font-size: 30px;line-height: 36px;margin: 0 0 18px 0;width: 700px}

#site-title a{color: #000;font-weight: bold;text-decoration: none}

#site-description{clear: right;float: right;font-style: italic;margin: 14px 0 18px 0;width: 220px}

#branding{float: left;width: 300px}

#logo{float: left;height: 90px;margin: 0 15px 0 0;width: 350px;background: url(/jscss/demoimg/201312/images/bg-glow.png) no-repeat scroll 0 0 transparent}

#logo img{border: 0 none;position: relative;top: 10px;z-index: 200}

#topad{float: left;height: 40px;margin: 15px 15px 0 135px;width: 320px;}

#searchb{float: left;margin: 30px 0}

#searchb input[type="text"], #searchb textarea{background: none repeat scroll 0 0 #F9F9F9;border: 0 none;float: left;height: 20px;padding: 5px 10px;width: 170px;-webkit-border-radius: 5px 5px 5px 5px;-moz-border-radius: 5px 5px 5px 5px;border-radius: 5px 5px 5px 5px;-webkit-box-shadow: 0 2px 2px #000, 0 3px 10px rgba(0, 0, 0, 0.4) inset;-moz-box-shadow: 0 2px 2px #000, 0 3px 10px rgba(0, 0, 0, 0.4) inset;box-shadow: 0 2px 2px #000, 0 3px 10px rgba(0, 0, 0, 0.4) inset;font-family: arial, helvetica, sans-serif;font-size: 15px}

#searchb .go{-webkit-border-radius: 5px 5px 5px 5px;-moz-border-radius: 5px 5px 5px 5px;border-radius: 5px 5px 5px 5px;-webkit-box-shadow: 0 2px 2px #000, 0 -2px 10px rgba(0, 0, 0, 0.5) inset;-moz-box-shadow: 0 2px 2px #000, 0 -2px 10px rgba(0, 0, 0, 0.5) inset;box-shadow: 0 2px 2px #000, 0 -2px 10px rgba(0, 0, 0, 0.5) inset;background: #82AD32;border: 0 none;font-size: 15px;font-weight: bold;height: 30px;margin: 0 10px;padding-bottom: 3px;text-shadow: 0 1px rgba(255, 255, 255, 0.35);width: 60px;cursor: pointer}

h1.title{margin: 50px 0;text-align: center;width: 100%;}

h1.title a{color: #555555;font-family: Georgia,Serif;font-size: 22pt;font-style: italic;text-decoration: none;}

h1.title a: hover{color: #333;}

.tutorial{position: fixed;width: 100%;text-align: center;font-size: 15px;bottom: 0;padding: 10px;font-family: 'Droid Sans', Arial, Sans-serif;background: #C6DFA2;border-top: 1px solid #B2C891;}

#demo-wrapper {background:#555555;margin: 80px auto 100px;overflow: hidden;padding: 10px;width: 550px;border-radius: 30px 30px 30px 30px;border: 1px solid #444444;box-shadow: 0 0 10px rgba(0,0,0,0.5), 0 1px 3px rgba(255, 255, 255, 0.2) inset;}

#dark {height: 28px;padding: 40px 160px;background:#555;}

#dark #search input[type="text"] {

background: url(/jscss/demoimg/201312/search-dark.png) no-repeat 10px 6px #444;

border: 0 none;

font: bold 12px Arial,Helvetica,Sans-serif;

color: #777;

width: 150px;

padding: 6px 15px 6px 35px;

-webkit-border-radius: 20px;

-moz-border-radius: 20px;

border-radius: 20px;

text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);

-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;

-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;

box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;

-webkit-transition: all 0.7s ease 0s;

-moz-transition: all 0.7s ease 0s;

-o-transition: all 0.7s ease 0s;

transition: all 0.7s ease 0s;

}

#dark #search input[type="text"]:focus {width: 200px;}

#white {height: 28px;padding: 40px 160px;}

#white #search input[type="text"] {

background: url(/jscss/demoimg/201312/search-white.png) no-repeat 10px 6px #fcfcfc;

border: 1px solid #d1d1d1;

font: bold 12px Arial,Helvetica,Sans-serif;

color: #bebebe;

width: 150px;

padding: 6px 15px 6px 35px;

-webkit-border-radius: 20px;

-moz-border-radius: 20px;

border-radius: 20px;

text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);

-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;

-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;

box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;

-webkit-transition: all 0.7s ease 0s;

-moz-transition: all 0.7s ease 0s;

-o-transition: all 0.7s ease 0s;

transition: all 0.7s ease 0s;

}

#white #search input[type="text"]:focus {width: 200px;}

#apple {height: 28px;padding: 40px 160px;background:#555;}

#apple #search input[type="text"] {

background: url(/jscss/demoimg/201312/search-white.png) no-repeat 10px 6px #444;

border: 0 none;

font: bold 12px Arial,Helvetica,Sans-serif;

color: #d7d7d7;

width:150px;

padding: 6px 15px 6px 35px;

-webkit-border-radius: 20px;

-moz-border-radius: 20px;

border-radius: 20px;

text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);

-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;

-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;

box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;

-webkit-transition: all 0.7s ease 0s;

-moz-transition: all 0.7s ease 0s;

-o-transition: all 0.7s ease 0s;

transition: all 0.7s ease 0s;

}

#apple #search input[type="text"]:focus {

background: url(/jscss/demoimg/201312/search-dark.png) no-repeat 10px 6px #fcfcfc;

color: #6a6f75;

width: 200px;

-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;

-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;

box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;

text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);

}

仿apple网站的CSS3搜索框