CSS3实现可伸缩输入框

最新推荐文章于 2022-09-24 21:18:21 发布

justforuse

最新推荐文章于 2022-09-24 21:18:21 发布

阅读量3.1k

点赞数 3

分类专栏： html/css 文章标签： css3

html/css 专栏收录该内容

75 篇文章 0 订阅

订阅专栏

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;
}