Как сделать раскрытие формы поиска в левую сторону?

Question

[slip35]

Нужна форма поиска для сайта, расширяющаяся при фокусе на ней. Вариантов как это можно сделать существует много, например, вот это демо. Но все они предусматривают расширение формы в правую сторону.
Приведу примера кода:

<form>
	<input type="search" placeholder="Искать">
</form>

input[type=search] {
	background: #ededed url(img/search-icon.png) no-repeat 9px center;
	border: solid 1px #ccc;
	padding: 9px 10px 9px 32px;
	width: 55px; /* Ширина по умолчанию */
	
	-webkit-border-radius: 10em;
	-moz-border-radius: 10em;
	border-radius: 10em;
	
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	transition: all .5s;
}
input[type=search]:focus {
	width: 130px; /* Ширина при наличии фокуса ввода */
	background-color: #fff;
	border-color: #6dcff6;
	
	-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
	-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
	box-shadow: 0 0 5px rgba(109,207,246,.5); /* Эффект свечения */
}

А как сделать, чтобы форма раскрылась наоборот, справа налево? Предполагается, что эта форма будет прижата к правому краю сайта.

Answer 1

[Андрей]

Анимация происходит за счет увеличения ширины, поэтому чтобы визуально растягивался левый край нужно зафиксировать правый.
Для этого можно использовать, например:
float: right
или

position: absolute
right: 0

или (на родительском элементе)
text-align: right;

Comments

[slip35]

Спасибо! Работает.

Answer 2

[Ильдар Сарибжанов]

Вы сначала прижмите форму к правому краю и, думаю, все само заработает.
Либо же прижмите к правому краю input, например добавив ему

input[type=search]{
    float: right;
}

Только не забудьте родителю overflow: hidden добавить