"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 (2) - 2 years ago - Reply 2


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) - 3 years ago - Reply -1


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (2) - 2 years ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (2) - 2 years ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (2) - 2 years ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (2) - 2 years ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (2) - 2 years ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (2) - 2 years ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (2) - 2 years ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (2) - 2 years ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (2) - 2 years ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (2) - 2 years ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (2) - 2 years ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (2) - 2 years ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (2) - 2 years ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (2) - 2 years ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (2) - 2 years ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (2) - 2 years ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (2) - 2 years ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (2) - 2 years ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (2) - 2 years ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (2) - 2 years 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 () - 10 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 () - 10 months ago - Reply 0


e

testing223 (2) - 2 years ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (2) - 2 years ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (2) - 2 years ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (2) - 2 years ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (2) - 2 years ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (2) - 2 years ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (2) - 2 years ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (2) - 2 years ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (2) - 2 years ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (2) - 2 years ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (2) - 2 years ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (2) - 2 years ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (2) - 2 years ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (2) - 2 years ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (2) - 2 years ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


e

testing223 (2) - 2 years ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


@@PQIGF

testing223 (2) - 2 years ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


testing223 (2) - 2 years ago - Reply 0


e

xhat007 (1) - 1 year ago - Reply 0


1'"

testing223 (2) - 2 years ago - Reply 0


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

testing223 (2) - 2 years ago - Reply 0


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

testing223 (2) - 2 years ago - Reply 0


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

testing223 (2) - 2 years ago - Reply 0


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

testing223 (2) - 2 years ago - Reply 0


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

testing223 (2) - 2 years ago - Reply 0


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

testing223 (2) - 2 years 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 (2) - 2 years ago - Reply 0


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

testing223 (2) - 2 years ago - Reply 0


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

testing223 (2) - 2 years ago - Reply 0


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

testing223 (2) - 2 years ago - Reply 0


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

testing223 (2) - 2 years ago - Reply 0


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

testing223 (2) - 2 years ago - Reply 0


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

testing223 (2) - 2 years ago - Reply 0


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

testing223 (2) - 2 years ago - Reply 0


buJ0bcbm

testing223 (2) - 2 years ago - Reply 0


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

testing223 (2) - 2 years ago - Reply 0


e

testing223 (2) - 2 years ago - Reply 0


e

testing223 (2) - 2 years ago - Reply 0


e

testing223 (2) - 2 years ago - Reply 0


e

testing223 (2) - 2 years 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) - 2 years 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 () - 10 months ago - Reply 0