Expand input field on focus

Question

I want to expand a search box to the left on focus. Following code will expand, but it will expand towards right. Is there anyway to expand 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 about using padding-left to make it expand to the left, along with changing margin-left so that the input box stays 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/