带动画的搜索框

　　

　　以下实例使用了 CSS transition 属性，该属性设置了输入框在获取焦点时会向右延展。

　　

　　CSS 实例

　　

　　input[type=text] {

　　

　　-webkit-transition: width 0.4s ease-in-out;

　　

　　transition: width 0.4s ease-in-out;

　　

　　}

　　

　　input[type=text]:focus {

　　

　　width: 100%;

　　

　　}

　　

　　文本框（textarea）样式

　　

　　注意: 使用 resize 属性来禁用文本框可以重置大小的功能（一般拖动右下角可以重置大小）。

　　

　　CSS 实例

　　

　　textarea {

　　

　　width: 100%;

　　

　　height: 150px;

　　

　　padding: 12px 20px;

　　

　　box-sizing: border-box;

　　

　　border: 2px solid #ccc;

　　

　　border-radius: 4px;

　　

　　background-color: #f8f8f8;

　　

　　resize: none;

　　

　　}