Search box

Developer
Henri Peetsmann
Size
2,434 Kb
Views
14,168
  1. Search box Previews
  2. Search box HTML Codes
  3. Search box CSS Codes

How do I make an search box?

Custom search field, a button and some subtle animations. What is a search box? How do you make a search box? This script and codes were developed by Henri Peetsmann on 09 December 2022, Friday.

Search box Previews
IQ Test

Search box - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Search box</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <h2>Search box</h2> <p>Custom search field, a button and some subtle animations</p> <hr> <div class="background"> <div class="row"> <div class="col-xs-10 col-xs-offset-1"> <form action="#"> <div class="search-box"> <input class="search-input" type="text" placeholder="Search for something..."> <input class="search-button" type="submit" value="Search"> <i class="search-icon fa fa-search"></i> </div> </form> </div> </div> </div>
</div>
</body>
</html>

Search box - Script Codes CSS Codes

/* Using Bootstrap 3.1.1 (just for the grid) //maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css */
/* and Fontawesome 4.3.0 (for the icon ) //maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css */
.container { max-width: 750px;
}
.background { padding-top: 30px; padding-bottom: 30px; background: #ddd;
}
/* Search Box */
.search-box { position: relative; height: 40px; /* Define the search box height and width here */ width: 100%;
}
.search-box .search-input { box-sizing: border-box; width: 100%; height: 100%; padding: 0 50px 0 10px; /* padding-right = button width */ border: solid 1px #808080; border-radius: 3px; color: #4b0082; outline: none; box-shadow: 0px 0px 3px 2px rgba(75,0,130,0); transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.search-box .search-input:focus { border-color: #4b0082; box-shadow: 0px 0px 4px 2px rgba(75,0,130,0.15);
}
/* Placeholder */
.search-box .search-input::-webkit-input-placeholder { color: #bfbfbf; }
.search-box .search-input::-moz-placeholder { color: #bfbfbf; opacity: 1; }
.search-box .search-input:-ms-input-placeholder { color: #bfbfbf; }
/* Icon */
.search-box .search-icon { content: ''; position: absolute; z-index: 0; top: 1px; /* Keep away */ right: 1px; /* from */ bottom: 1px; /* border */ width: 50px; line-height: 38px; /* 40 - 1 - 1 */ font-size: 20px; text-align: center; color: #4b0082; transition: transform 0.2s ease;
}
/* Button */
.search-box .search-button { position: absolute; z-index: 1; top: -5px; /* using negative values, so that on touch */ right: 1px; bottom: -5px; /* devices it would be easier to hit */ width: 50px; border: none; overflow: hidden; /* Just to be sure */ opacity: 0; /* hidden */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */
}
Search box - Script Codes
Search box - Script Codes
Home Page Home
Developer Henri Peetsmann
Username henripeetsmann
Uploaded December 09, 2022
Rating 3
Size 2,434 Kb
Views 14,168
Do you need developer help for Search box?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Henri Peetsmann (henripeetsmann) Script Codes
Name
Responsive Moto G mockup
Responsive MacBook retina mockup
Responsive SVG cross-browser
Sponsor logos
EM Units Experiment
Sprite animation experiment
Modified Bootstrap dropdown
Price ribbon
Full size Vimeo background cover
A Pen by Henri Peetsmann
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!