Expand input field in focus

Question

I want to expand the search box to the left in focus. The following code will expand, but it will expand to the right. Anyway, to rotate it to the left?

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

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

Answer 1

How to use padding-left so that it expands to the left, along with changing margin-left so that the input field remains in the same place:

 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

use Direction: rtl in your code:

  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

You can add padding-left:70px; out of focus. This will expand it to the left.

Answer 4

Using padding will simply create a false width that prevents the display of long text within the visible width. Use the width property instead, as it is for:

 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">