关闭

CSS3实现可伸缩输入框

标签: css3
160人阅读 评论(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;
}

实现效果:
这里写图片描述

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:232647次
    • 积分:3410
    • 等级:
    • 排名:第9860名
    • 原创:150篇
    • 转载:20篇
    • 译文:1篇
    • 评论:22条
    最新评论