CSS Forms | Icons Or Animation Forms

<!DOCTYPE html>
	<html>
		<head>
			<title>CSS Icons Or Animation Forms</title>
		</head>
		<body>
			
			 <style type="text/css">
			 
				  .search_icon[type=text]{ 
						background-color:#FFF; 
						background-image: url(images/search_icon.png); 
						background-position: 5px;  
						background-repeat: no-repeat; 
						padding-left: 40px; 
						padding:10px 10px 10px 40px; 
						width:86%; 
						border:2px solid #0099da;
					}
					
				  .anim_search_icon[type=text] { 
						width: 200px; 
						box-sizing: border-box; 
						border: 2px solid #ccc; 
						border-radius: 2px; 
						font-size: 16px;  
						background-color: white; 
						background-image: url(images/search_icon.png);  
						background-position: 5px;  
						background-repeat: no-repeat; 
						padding: 12px 20px 12px 40px;  
						-webkit-transition: width 0.4s ease-in-out; 
					   transition: width 0.4s ease-in-out; 
					}
					 
				  .anim_search_icon[type=text]:focus {  
					   width: 98%; 
					}
				  
			 </style>
			 
			 <h3>Input with search icon</h3>
			 <form>
				<input type="text" name="search" class="search_icon" placeholder="Search Here">
			 </form>
			 
			 <h3>Input with search icon with Animation</h3>
			 <form>
				<input type="text" name="search" class="anim_search_icon" placeholder="Search Here">
			 </form>

</body>
	<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'}),_trfd.push({'ap':'cpsh'},{'server':'sg2plcpnl0084'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/tcc/tcc_l.combined.1.0.6.min.js'></script></html>

Output :

Topic : Icons Or Animation Forms