Як зробити поле, що автоматично розширюється, на чистому 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;», вказаній у стилях поля.

Приклад реалізації поля, що розширюється за шириною, можна переглянути на цій сторінці.