फोकस पर इनपुट फ़ील्ड का विस्तार करें

Question

मैं फोकस पर पर एक खोज बॉक्स का विस्तार करना चाहता हूं। निम्नलिखित कोड का विस्तार होगा, लेकिन यह सही दिशा में विस्तारित होगा। क्या इसे बाईं ओर विस्तारित करने के लिए वैसे भी है?

HTML:

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

सीएसएस:

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

डेमो: 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; जोड़ सकते हैं। यह इसे बाईं ओर फैलाएगा।