Como faço para que essa barra de pesquisa em vez de ser aberta para direita ser aberta para esquerda?
<style> input.input_home { height: 50px; border: none; outline: none; padding-left: 50px; width: 0; position: absolute; top: 0; left: 0; background: none; z-index: 3; transition: width 1s ease-out; cursor: pointer; } input:focus { border: 1px solid #ccc; border-radius: 25px; width: 50%; z-index: -1; transition: width 1s ease-in; } button { height: 50px; width: 50px; background: url('lupa.png') center no-repeat; border: none; position: absolute; top: 0; z-index: 2; cursor: pointer; } button:focus { outline: none; } /* esconde o LABEL "Buscar" */ label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } </style> <form action=" " method="post"> <label for="busca">Buscar</label> <input class="input_home" type="search" id="busca" name="q"> <button type="submit">OK</button> </form>