How to create an HTML input box with search icon inside it?

We can make an interesting search input by styling it with css, by adding search icon like what we see in this image:

Here is HTML script, input tag with an id:

<input type="text" id="searchinput">

And this is CSS part:

#searchinput {
	background-image: url('search.png');
	background-size: 30px 30px;
	background-position: 5px 5px;
	background-repeat: no-repeat;
	width: 100%;
	padding: 12px 20px 12px 40px;
	border: 1px solid #ddd;
	border-radius: 10px;
}

Don’t forget to place your search.png icon file on your directory.