Как сделать автоматически расширяемое поле на чистом CSS3

Все доброго времени и хорошего настроения.

Т.к. в последнее время мне пришлось податься в верстку, то некоторые статьи будут посвящены HTML5, CSS3, Flexbox и прочим подобным вещам. Знающим программистам данные уроки могут показаться достаточно простыми. Но возможно, вы все же сможете почерпнуть для себя что-то новенькое а может быть найдете более простое решение тому чем пользуетесь на данный момент.

Сегодня, рассмотрим простейший пример текстового поля, плавно увеличивающегося по ширине, от помещения в него каретки для ввода текста.
Реализуем мы это на чистом CSS3, ну и конечно же на HTML.

Ниже, HTML код:

<div class="field-search-wrap">
	<input type="text" class="field-search" placeholder="Поиск:">
</div>

все довольно просто, обертка с классом «field-search-wrap», и поле для ввода теста в нем.

Далее, код CSS выполненный в синтаксисе SCSS (кто им еще не пользуется — очень рекомендую, время экономит не реально, и позволяет удобно распределить файлы):

.field-search {
	background-color: transparent; 
	
	line-height: 28px;
	color: #747373;
	font-family: 'Open Sans', sans-serif;
	text-align: left;
	font-size: 16px;
	
	outline: none;
	border: 0;
	width: 150px;
	margin-right: 28px;
	margin-left: 10px;
	transition: 400ms;
	
	&:focus {
		width: 400px;
	}
	
	&-wrap {
		padding: 5px;
		display: inline-block;
		border-radius: 20px;
		background-color: #ebebeb;
	}
}

Класс «.field-search» - определяет стили для нашего поля
«:focus» или в стиле CSS - «.field-search:focus», т. е. событие срабатывающее при установки каретки в поле (т. е. фокусе). Здесь мы увеличиваем ширину поля до 400px. При этом, увеличение происходит плавно за счет свойства «transition: 400ms;» указанного в поле.

Пример реализации увеличиваемого по ширине поля, можно найти на этой странице.