"Awesome Search Box"
Bootstrap 4.1.1 Snippet by SamimOnline

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <title>Awesome Search Box</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous"> </head> <!-- Coded with love by Mutiullah Samim--> <body> <div class="container h-100"> <div class="d-flex justify-content-center h-100"> <div class="searchbar"> <input class="search_input" type="text" name="" placeholder="Search..."> <a href="#" class="search_icon"><i class="fas fa-search"></i></a> </div> </div> </div> </body> </html>
body,html{ height: 100%; width: 100%; margin: 0; padding: 0; background: #e74c3c !important; } .searchbar{ margin-bottom: auto; margin-top: auto; height: 60px; background-color: #353b48; border-radius: 30px; padding: 10px; } .search_input{ color: white; border: 0; outline: 0; background: none; width: 0; caret-color:transparent; line-height: 40px; transition: width 0.4s linear; } .searchbar:hover > .search_input{ padding: 0 10px; width: 450px; caret-color:red; transition: width 0.4s linear; } .searchbar:hover > .search_icon{ background: white; color: #e74c3c; } .search_icon{ height: 40px; width: 40px; float: right; display: flex; justify-content: center; align-items: center; border-radius: 50%; color:white; text-decoration:none; }

Related: See More


Questions / Comments:

e

testing223 (1) - 1 year ago - Reply 1


e

xhat007 (1) - 1 year ago - Reply 0


In responsive view this search icon goes down after expand this search bar.

Any solution?

Shuvo (-1) - 2 years ago - Reply -1


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


Grab your hands on the Convection microwave oven in India with Reviews & Buyer's Guide.

Choose the best warranty. https://www.bestmicrowave.in/best-microwave-oven-india

archi1491 () - 2 months ago - Reply 0


Grab your hands on the Convection microwave oven in India with Reviews & Buyer's Guide.

Choose the best warranty. https://www.bestmicrowave.in/best-microwave-oven-india

archi1491 () - 2 months ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


@@PQIGF

testing223 (1) - 1 year ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


testing223 (1) - 1 year ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


1'"

testing223 (1) - 1 year ago - Reply 0


e'||DBMS_PIPE.RECEIVE_MESSAGE(CHR(98)||CHR(98)||CHR(98),15)||'

testing223 (1) - 1 year ago - Reply 0


OCXBJWvp')) OR 354=(SELECT 354 FROM PG_SLEEP(15))--

testing223 (1) - 1 year ago - Reply 0


5LILZAtR') OR 131=(SELECT 131 FROM PG_SLEEP(15))--

testing223 (1) - 1 year ago - Reply 0


G5PEzhPF' OR 748=(SELECT 748 FROM PG_SLEEP(15))--

testing223 (1) - 1 year ago - Reply 0


1pLcuzZ9'; waitfor delay '0:0:15' --

testing223 (1) - 1 year ago - Reply 0


1 waitfor delay '0:0:15' --

testing223 (1) - 1 year ago - Reply 0


(select(0)from(select(sleep(15)))v)/'+(select(0)from(select(sleep(15)))v)+'"+(select(0)from(select(sleep(15)))v)+"/

testing223 (1) - 1 year ago - Reply 0


0"XOR(if(now()=sysdate(),sleep(15),0))XOR"Z

testing223 (1) - 1 year ago - Reply 0


0'XOR(if(now()=sysdate(),sleep(15),0))XOR'Z

testing223 (1) - 1 year ago - Reply 0


if(now()=sysdate(),sleep(15),0)

testing223 (1) - 1 year ago - Reply 0


-1" OR 2+971-971-1=0+0+0+1 --

testing223 (1) - 1 year ago - Reply 0


-1' OR 2+781-781-1=0+0+0+1 or 'E2KLXhL5'='

testing223 (1) - 1 year ago - Reply 0


-1' OR 2+26-26-1=0+0+0+1 --

testing223 (1) - 1 year ago - Reply 0


-1 OR 2+385-385-1=0+0+0+1

testing223 (1) - 1 year ago - Reply 0


buJ0bcbm

testing223 (1) - 1 year ago - Reply 0


-1 OR 2+804-804-1=0+0+0+1 --

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


So...I'm curious. Is something missing? Not only do these not work on this site, but they don't resolve in any search results when applied to my site, either. Just reloads the page. There must be some functional script for something that's not working or is missing.

vernontnh (-1) - 1 year ago - Reply 0


Buy the Best Convection Microwave Ovens in India. Convection microwaves are the right

choice. https://www.bestmicrowave.in/best-microwave-oven-india

archi1491 () - 2 months ago - Reply 0