10

我想在焦点的左侧展开一个搜索框。以下代码将扩展，但会向右扩展。有没有办法把它向左扩展？

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/

4

4 回答 4

8

如何使用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/

于 2013-11-04T11:58:42.833 回答
2

在您的代码中使用 Direction:rtl：

 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;
    direction:rtl
}

http://jsfiddle.net/7ppaS/8/

于 2013-11-04T11:55:52.543 回答
1

使用padding只会创建一个不允许长文本显示在表观宽度内的错误宽度。请改用该width属性，因为它的用途是：

input {
  width: 10rem;
  -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;
  direction: rtl
}

input[type=text]:focus {
  width: 15rem;
}
<input type="text" placeholder="search">

于 2018-03-15T06:40:02.227 回答
0

您可以添加一个padding-left:70px;焦点。这会将其扩展到左侧。

于 2013-11-04T12:00:52.500 回答