Result
アイコンをクリックで検索窓が飛び出す、みたいなの
css
# wrap {
margin : 50px 100px ;
display : inline-block ;
position : relative ;
height : 60px ;
float : right ;
padding : 0 ;
position : relative ;
}
input[type= "text" ] {
height : 60px ;
font-size : 20px ;
display : inline-block ;
font-weight : 100 ;
border : none ;
outline : none ;
color : #555 ;
padding : 3px ;
padding-right : 60px ;
width : 0px ;
position : absolute ;
top : 0 ;
right : 0 ;
background : none ;
z-index : 3 ;
transition : width . 4 s cubic-bezier( 0.000 , 0.795 , 0.000 , 1.000 );
cursor : pointer ;
}
input[type= "text" ]:focus:hover {
border-bottom : 1px solid #BBB ;
}
input[type= "text" ]:focus {
width : 350px ;
z-index : 1 ;
border-bottom : 1px solid #BBB ;
cursor : text;
}
input[type= "submit" ] {
height : 67px ;
width : 63px ;
display : inline-block ;
color : red ;
float : right ;
background : url (data:image/png;base 64 ,iVBORw 0 KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg 3 Am 1 AAAAGXRFWHRTb 2 Z 0 d 2 FyZQBBZG 9 iZSBJbWFnZVJlYWR 5 ccllPAAAADNQTFRFU 1 NT 9 fX 1 lJSUXl 5 e 1 dXVfn 5 +c 3 Nz 6 urqv 7 +/tLS 0 iYmJqampn 5 +fysrK 39 /faWlp////Vi 4 ZywAAABF 0 Uk 5 T/////////////////////wAlrZliAAABLklEQVR 42 rSWWRbDIAhFHeOUtN 3 /ags 1 zaA 4 cHrKZ 8 JFRHwoXkwTvwGP 1 Qo 0 bYObAPwiLmbNAHBWFBZlD 9 j 0 JxflDViIObNHG/Do 8 PRHTJk 0 TezAhv 7 qloK 0 JJEBh+F 8 +U/hopIELOWfiZUCDOZD 1 RADOQKA 75 oq 4 cvVkcT+OdHnqqpQCITWAjnWVgGQUWz 12 lJuGwGoaWgBKzRVBcCypgUkOAoWgBX/L 0 CmxN 40 u 6 xwcIJ 1 cOzWYDffp 3 axsQOyvdkXiH 9 FKRFwPRHYZUaXMgPLeiW 7 QhbDRciyLXJaKheCuLbiVoqx 1 DVRyH 26 yb 0 hsuoOFEPsoz+BVE 0 MRlZNjGZcRQyHYkmMp 2 hBTIzdkzCTc/pLqOnBrk 7 /yZdAOq/q 5 NPBH 1 f 7 x 7 fGP 4 C 3 AAMAQrhzX 9 zhcGsAAAAASUVORK 5 CYII=) center center no-repeat ;
text-indent : -10000px ;
border : none ;
position : absolute ;
top : 0 ;
right : 0 ;
z-index : 2 ;
cursor : pointer ;
opacity : 0.4 ;
cursor : pointer ;
transition : opacity . 4 s ease;
}
input[type= "submit" ]:hover {
opacity : 0.8 ;
}
|
html
< div id = "wrap" >
< form action = "" autocomplete = "on" >
< input id = "search" name = "search" type = "text" placeholder = "検索!" >< input id = "search_submit" value = "Rechercher" type = "submit" >
</ form >
</ div >
|
via
Animated search Form