* { box-sizing:border-box; } body { margin:0; padding:0; background-image:url(ydrzimages/p3.jpg); font-weight:500; font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo; } #container { width:500px; height:820px; margin:0 auto; } div.search { padding:10px 0; } form { position:relative; width:300px; margin:0 auto; } input,button { border:none; outline:none; } input { width:100%; height:42px; padding-left:13px; } button { height:42px; width:42px; cursor:pointer; position:absolute; } /*搜索框6*/ .bar6 input { border:2px solid #c5464a; border-radius:5px; background:transparent; top:0; right:0; } .bar6 button { background:#c5464a; border-radius:0 5px 5px 0; width:60px; top:0; right:0; } .bar6 button:before { content:"搜索"; font-size:13px; color:#F9F0DA; } /*搜索框7*/ .bar7 form { height:42px; } .bar7 input { width:250px; border-radius:42px; border:2px solid #324B4E; background:#F9F0DA; transition:.3s linear; float:right; } .bar7 input:focus { width:300px; } .bar7 button { background:none; top:-2px; right:20px; } .bar7 button:before { content:"Search"; font-family:FontAwesome; color:#324b4e; } /*搜索框8*/ .bar8 form { height:42px; } .bar8 input { width:0; padding:0 42px 0 15px; border-bottom:2px solid transparent; background:transparent; transition:.3s linear; position:absolute; top:0; right:0; z-index:2; } .bar8 input:focus { width:300px; z-index:1; border-bottom:2px solid #F9F0DA; } .bar8 button { background:#683B4D; top:0; right:0; } .bar8 button:before { content:"Go"; font-family:FontAwesome; font-size:16px; color:#F9F0DA; }
很简单哦!