带动画的搜索框
以下实例使用了 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;
}
如需转载,请注明文章出处和来源网址: