Search Form

Developer
Jonathan Garner
Size
2,674 Kb
Views
24,288
  1. Search Form Previews
  2. Search Form HTML Codes
  3. Search Form CSS Codes

How do I make an search form?

What is a search form? How do you make a search form? This script and codes were developed by Jonathan Garner on 13 August 2022, Saturday.

Search Form Previews
IQ Test

Search Form - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Search Form</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <form action=""> <input class="search" type="text" placeholder="Search" /> <button class="c-search__submit">Go</button> <p class="search-text">Search</p> </form>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Search Form - Script Codes CSS Codes

body { height: 100vh; background: lightgrey; display: flex; justify-content: center; align-items: flex-start;
}
.container { background: white; position: relative; width: 500px; padding: 1em;
}
form { display: flex; justify-content: flex-end;
}
input:focus, textarea:focus { outline: none;
}
.search { float: right; border: solid white 1px; border-right: none; z-index: 1; color: #9d9282; opacity: 0; width: 50px; -webkit-transition: width 0.5s; transition: width 0.5s;
}
.search:focus { opacity: 1; background: white; width: 100%; border: solid #9d9282 1px;
}
.c-search__submit { z-index: 1; display: none; background: #9d9282; color: white; border: none;
}
.search:focus + .c-search__submit { display: block;
}
.search:focus + .search-text { display: none;
}
.search-text { position: absolute; z-index: 0; color: #9d9282; top: 2px; right: 0; padding-right: calc(1em + 1px);
}
.search-text:hover { cursor: pointer;
}
::-webkit-input-placeholder { color: #9d9282; opacity: 0; -webkit-transition: opacity 0.5s; transition: opacity 0.5s;
}
:-moz-placeholder { /* Firefox 18- */ color: #9d9282; opacity: 0; -webkit-transition: opacity 0.5s; transition: opacity 0.5s;
}
::-moz-placeholder { /* Firefox 19+ */ color: #9d9282; opacity: 0; -webkit-transition: opacity 0.5s; transition: opacity 0.5s;
}
:-ms-input-placeholder { color: #9d9282; opacity: 0; -webkit-transition: opacity 0.5s; transition: opacity 0.5s;
}
input:focus::-webkit-input-placeholder { opacity: 1;
}
input:focus:-moz-placeholder { /* Firefox 18- */ opacity: 1;
}
input:focus::-moz-placeholder { /* Firefox 19+ */ opacity: 1;
}
input:focus:-ms-input-placeholder { opacity: 1;
}
Search Form - Script Codes
Search Form - Script Codes
Home Page Home
Developer Jonathan Garner
Username jonathangarner
Uploaded August 13, 2022
Rating 3
Size 2,674 Kb
Views 24,288
Do you need developer help for Search Form?

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!

Jonathan Garner (jonathangarner) Script Codes
Name
Inside the Stalin Archives
Incendiary
JM Nav 2nd Gen prototype x3
A Pen by Jonathan Garner
After America
Search Form2
Mr Peanut
JM Top Nav v1
JM Nav 2nd Gen prototype x
JM Nav 2nd Gen prototype x2
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!