CSS3实现可伸缩输入框

html文件：<input type="text">css文件：input{border: 1px solid #CCC;cursor: pointer;height: 30px;margin: 3px 0;text-indent:10px;position: relative;transition: width 400ms ea

justforuse

3207人浏览 · 2016-05-30 22:38:17

justforuse · 2016-05-30 22:38:17 发布

html文件：

<input type="text">

css文件：

input{
    border: 1px solid #CCC;
    cursor: pointer;
    height: 30px;
    margin: 3px 0;
    text-indent:10px;
    position: relative;
    transition: width 400ms ease, background 400ms ease, border-radius 400ms ease;
    width: 100px;
    font-size: 16px;
}
input:focus{
    background-color: #fff;
    border: 2px solid #c3c0ab;
    border-radius:10px;
    cursor: text;
    outline: 0;
    width: 230px;
}