How to Make an Auto-Expanding Field in Pure CSS3

Greetings and good mood to everyone.

Since I’ve recently had to dive into front-end development, some of the upcoming posts will be dedicated to HTML5, CSS3, Flexbox, and related topics. For experienced developers, these lessons may seem quite basic. However, you still might discover something new — or perhaps a simpler way to achieve something you’re already doing.

Today, we’ll look at a simple example of a text input field that smoothly expands in width when the cursor is placed inside it.
We’ll implement this using pure CSS3 and, of course, HTML.

Below is the HTML code:

<div class="field-search-wrap">
	<input type="text" class="field-search" placeholder="Search:">
</div>

It’s all quite straightforward: a wrapper with the class “field-search-wrap” and a text input field inside it.

Next is the CSS code written using SCSS syntax (if you’re not using it yet — I highly recommend it, it saves a ton of time and helps organize your files efficiently):

.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;
	}
}

The class “.field-search” defines the styles for our input field.
“:focus” (or in full — “.field-search:focus”) is a CSS pseudo-class that triggers when the input gains focus. In this case, we increase the width of the field to 400px. The smooth transition happens thanks to the “transition: 400ms;” property applied to the field.

An example of this expanding input field can be found on this page.