html – 在焦点上展开输入字段

发布时间：2020-12-14 18:41:21 所属栏目：资源来源：网络整理

导读：我想在焦点上向左侧展开一个搜索框.以下代码将扩展,但它将向右扩展.无论如何将它扩展到左边？ HTML： input type="text" placeholder="search" CSS： input[type="text"] { background: #444; border: 0 none; color: #d7d7d7; width:50px; padding: 6px 15p

我想在焦点上向左侧展开一个搜索框.以下代码将扩展,但它将向右扩展.无论如何将它扩展到左边？

HTML：

<input type="text" placeholder="search">

CSS：

input[type="text"] {
    background: #444;
    border: 0 none;
    color: #d7d7d7;
    width:50px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
     margin:3px 12px;
}

input[type="text"]:focus {
    background:#ccc;
    color: #6a6f75;
    width: 120px;    
    margin:3px 12px;
    outline: none;
}

input[type="text"] {
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}

演示：
http://jsfiddle.net/7ppaS/

解决方法

如何使用padding-left使其向左扩展,同时更改margin-left以使输入框保持在同一位置：

input[type="text"] {
    background: #444;
    border: 0 none;
    color: #d7d7d7;
    width:50px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
     margin:3px 80px;
}

input[type="text"]:focus {
    background:#ccc;
    color: #6a6f75;
    padding-left:80px;  
    margin-left:35px;
    outline: none;
}

演示：http://jsfiddle.net/7ppaS/4/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!