ANIMATING SEARCH FORM

Run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<link rel="stylesheet" href="style.css">
<style>
   input[type=text] {
	  width: 100%;
	  box-sizing: border-box;
	  border: 2px solid blue;
	  font-size: 16px;
	  background-color: white;
	  background-repeat: no-repeat;
	  padding: 12px 20px 12px 40px;
	  -webkit-transition: width 0.6s ease-in-out;
	  transition: width 0.6s ease-in-out;
	}

	  input[type=text]:focus {
	      width: 150px;
	 
</style>
</head>
<body>
    <h2> Click on search box to animate </h2>
	<form>
       <input type="text" name="search" placeholder="Search..">
    </form>
</body>
</html>