展開焦點上的輸入欄

Question

我想將搜索框擴展到焦點上的左側。以下代碼將會擴展，但會向右擴展。無論如何將它擴展到左邊？

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/

Answer 1

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

DEMO： http://jsfiddle.net/7ppaS/4/

Answer 2

的使用方向：在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/

Answer 3

您可以在焦點上添加padding-left:70px;。這會將它擴展到左側。