CSS 3テキストボックス焦点伸長効果を実現
アップルの公式サイトの検索機能を使ったことがあると、検索ボックスがフォーカスを獲得すると自動的に伸び、アニメーション効果があることがわかりますが、これはどのように実現されていますか?
Flashは不要、JavaScriptは不要、純CSS 3で実現可能、まずDemo(IEカーネルブラウザはサポートされていない):
下に伸びる
CSSコード:
HTMLコード:
Flashは不要、JavaScriptは不要、純CSS 3で実現可能、まずDemo(IEカーネルブラウザはサポートされていない):
下に伸びる
CSSコード:
input, textarea{
color: #888;
padding: 5px;
margin: 10px;
outline: none;
overflow:hidden;
border-radius: 5px;
background: #fafafa;
border: 1px solid #ddd;
-moz-box-shadow: inset 1px 1px 10px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 1px 1px 10px rgba(0,0,0,0.1);
box-shadow: inset 1px 1px 10px rgba(0,0,0,0.1);
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
}
.style1{
width: 150px;
}
.style1:focus{
width: 230px;
}
.style2{
float: right;
width: 150px;
}
.style2:focus{
width: 230px;
}
.style3{
width: 10%;
}
.style3:focus{
width: 98%;
}
.style4{
height: 2em;
width: 230px;
}
.style4:focus{
height: 8em;
}
HTMLコード:
< input class="style1" type="text" value=" " />
< input class="style2" type="text" value=" " />
< br />
< input class="style3" type="text" value=" " />
< br />
< textarea class="style4"> ？
O(∩_∩)O
~</ textarea>