Implementation of scalable search box with CSS

Since a scalable search box has been placed on the theme of WordPress, the text field of this effect appears more and more on the new website. To achieve this effect is actually very simple, click the mouse below the search icon, you will see the search box appears, and slowly longer. Using a few simple lines of CSS can complete it, of course, the premise is that you need to use modern browsers that support CSS3, such as Google browser, Firefox browser.

Click to have a try

Here is the CSS3 code to implement it:

.search-field {
	border: none;
	cursor: pointer;
	height: 37px;
	margin: 3px 0;
	padding: 0 0 0 34px;
	position: relative;
	transition: width 400ms ease, background 400ms ease;
	width: 0;

.search-field:focus {
	background-color: #fff;
	border: 2px solid #c3c0ab;
	cursor: text;
	outline: 0;
	width: 230px;

Explain that the search box icon uses a background image, which does not affect (occupy) the position of the search box text field (input) because it adds a padding value on the left to the text field: padding: 00034px;, and the background image only appears in the padding range. The initial length of the text field is 0, so you can only see the search icon at first. A CSS focus listening event is added to the text field. When you click on the text field, it gets the focus. At this time, CSS transform is used to increase its length.

It’s very interesting. Try it in your project to surprise your customers / boss who don’t know the technology.

Related Article
WordPress 3D rotating tag cloud

This 3D tag cloud is not the flash version of WP cumulus n years ago. This 3D rotating tag cloud Read more

Using wampserver tool to build local PHP + MySQL environment

No matter whether we use domestic space or foreign hosts, we prefer to go online after local debugging before setting Read more

How to install Linux system on Android phone

In our daily use of Android mobile phones, the installation of a complete Linux system will make mobile phones become Read more

How to backup your website data with Android phone

No matter what you do, backup is very necessary and important. Backup is just in case. Most of the time, Read more

Leave a Reply

Your email address will not be published. Required fields are marked *

To prove you're a person (not a spam script), type the security word shown in the picture.
Anti-spam image