Search Form2

Developer
Jonathan Garner
Size
3,103 Kb
Views
42,504
  1. Search Form2 Previews
  2. Search Form2 HTML Codes
  3. Search Form2 CSS Codes
  4. Search Form2 JS Codes

How do I make an search form2?

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

Search Form2 Previews
IQ Test

Search Form2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Search Form2</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <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> <section> <p class="c-search-link">Search</p>
</section>
<div class="container"> <form class="c-search-bar" action=""> <input class="c-search" type="text" placeholder="Search" /> <button class="c-search__submit">Go</button> </form>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Search Form2 - Script Codes CSS Codes

body { height: 100vh; background: lightgrey;
}
section { background: white; width: 80%; margin: 0 auto; padding: 1em;
}
.container { background: white; position: relative; width: 80%; margin: 0 auto; padding: 1em;
}
form { display: flex; justify-content: flex-end;
}
input:focus, textarea:focus { outline: none;
}
.c-search-link { display: none;
}
.js .c-search-link { display: block; color: #9d9282; position: relative; right: 0; cursor: pointer; -webkit-transition: text-align 0.5s; transition: text-align 0.5s;
}
.c-search-link.is-active { text-align: left;
}
.js .c-search-bar { height: 0; overflow: hidden; -webkit-transition: height 0.2s; transition: height 0.2s;
}
.c-search { color: #9d9282; border: solid #9d9282 1px; border-right: none; width: 100%; padding: 0.2em; -webkit-transition: width 0.5s; transition: width 0.5s; -webkit-transition: opacity 0.5s; transition: opacity 0.5s;
}
.c-search-bar.is-active { height: 27px;
}
.c-search__submit { background: #9d9282; color: white; border: none;
}
::-webkit-input-placeholder { color: #9d9282; opacity: 1; -webkit-transition: opacity 0.5s; transition: opacity 0.5s;
}
:-moz-placeholder { /* Firefox 18- */ color: #9d9282; opacity: 1; -webkit-transition: opacity 0.5s; transition: opacity 0.5s;
}
::-moz-placeholder { /* Firefox 19+ */ color: #9d9282; opacity: 1; -webkit-transition: opacity 0.5s; transition: opacity 0.5s;
}
:-ms-input-placeholder { color: #9d9282; opacity: 1; -webkit-transition: opacity 0.5s; transition: opacity 0.5s;
}
input:focus::-webkit-input-placeholder { opacity: 0;
}
input:focus:-moz-placeholder { /* Firefox 18- */ opacity: 0;
}
input:focus::-moz-placeholder { /* Firefox 19+ */ opacity: 0;
}
input:focus:-ms-input-placeholder { opacity: 0;
}

Search Form2 - Script Codes JS Codes

document.documentElement.className = "js"
$(document).ready(function() { var $searchLink = $('.c-search-link'), $searchBar = $('.c-search-bar'), $searchInput = $('.c-search'); $searchInput.removeAttr( "placeholder" ); // When clicking on search link $searchLink.click(function() { $searchLink.toggleClass('is-active'); $searchBar.toggleClass('is-active'); $( ".c-search" ).focus(); return false; });
});
Search Form2 - Script Codes
Search Form2 - Script Codes
Home Page Home
Developer Jonathan Garner
Username jonathangarner
Uploaded August 13, 2022
Rating 3
Size 3,103 Kb
Views 42,504
Do you need developer help for Search Form2?

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
Mr Peanut
Inside the Stalin Archives
JM Nav 2nd Gen prototype x2
Testing flexbox
Search Form
After America
JM Nav 2nd Gen prototype x3
Incendiary
JM Top Nav v1
JM Nav 2nd Gen prototype x
Create amazing SEO content 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!