Search and Filter

Developer
Sam Durphy
Size
3,891 Kb
Views
14,168
  1. Search and Filter Previews
  2. Search and Filter HTML Codes
  3. Search and Filter CSS Codes

How do I make an search and filter?

Forked from Marty Powell's Pen Search and Filter.. What is a search and filter? How do you make a search and filter? This script and codes were developed by Sam Durphy on 24 September 2022, Saturday.

Search and Filter Previews
IQ Test

Search and Filter - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Search and Filter</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Search and Filter</h1>
<h2>Global Search</h2>
<ul><li><!-- skip navigation removed from included pages --> <div id="googlesearch">
<div id="___gcse_0"> <div class="gsc-control-searchbox-only gsc-control-searchbox-only-en" dir="ltr"><form class="gsc-search-box" accept-charset="utf-8"> <table cellspacing="0" cellpadding="0" class="gsc-search-box"> <tbody> <tr> <td class="gsc-input"> <input autocomplete="off" type="text" size="10" class=" gsc-input " name="search" title="search" id="gsc-i-id1" x-webkit-speech="" x-webkit-grammar="builtin:search" lang="en" dir="ltr" spellcheck="false" style="outline: none;"> <input type="hidden" name="bgresponse" id="bgresponse"></td><td class="gsc-search-button"> <input type="button" value="Search" class="gsc-search-button" title="search"> </td> <td class="gsc-clear-button"> <div class="gsc-clear-button" title="clear results">&nbsp;</div></td></tr></tbody></table><table cellspacing="0" cellpadding="0" class="gsc-branding"><tbody><tr style="display: none;"><td class="gsc-branding-user-defined"></td><td class="gsc-branding-text"><div class="gsc-branding-text">powered by</div></td><td class="gsc-branding-img"><img src="https://www.google.com/uds/css/small-logo.png" class="gsc-branding-img"></td></tr></tbody></table></form></div></div></div>&nbsp;</li></ul>
<hr>
<h2>Filter</h2>
<form id="filter-form" name="filter-form"> <p><b>Filter:</b> Enter topic or keyword to filter this page.</p> <input name="filter" id="filter" value="" maxlength="50" size="95" type="text"><input type="button" name="clear" class="clear" value="Clear">
</form> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Search and Filter - Script Codes CSS Codes

html { color: #444; font-family: Arial, Helvetica, sans-serif;
}
body { font-size: 1em;
}
h1, h2, h3, h4, h5, h6 { margin: 5px 0;
}
h1 { font-size: 2em;
}
h2 { color: rgba(68, 68, 68, 0.9); font-size: 1.8em;
}
h3 { color: rgba(68, 68, 68, 0.9); font-size: 1.6em;
}
h4 { color: rgba(68, 68, 68, 0.9); font-size: 1.4em;
}
h5 { color: rgba(68, 68, 68, 0.9); font-size: 1.2em;
}
h6 { color: rgba(68, 68, 68, 0.9); font-size: 1em;
}
p { font-size: .96em; line-height: 2em; margin: 0 0 15px 0;
}
a { color: #002280; text-decoration: none;
}
a:hover { text-decoration: underline;
}
table { background-color: transparent; border-collapse: collapse; border-spacing: 0; max-width: 100%;
}
.table tbody tr:hover > td, .table tbody tr:hover > th { background-color: #ebebeb;
}
.table thead th { vertical-align: bottom;
}
.table th { font-weight: bold; border-bottom: 2px solid #c51110;
}
.table th, .table td { border-top: 1px dotted #444; line-height: 20px; padding: 8px; text-align: left; vertical-align: top;
}
#googlesearch { margin: -10px 12px 0 5px; width: 450px;
}
input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus { background-color: #Feb30c !important; background-image: none; border-color: #666666; color: #000 !important; text-transform: uppercase; filter: none; width: 75px !important;
}
.cse input.gsc-input, input.gsc-input { font-family: inherit; border: 1px solid #BBB; padding: 3px 6px; width: 350px; font-size: 16px;
}
table.gsc-search-box td { vertical-align: middle;
}
.cse table.gsc-search-box td.gsc-input, table.gsc-search-box td.gsc-input { padding-right: 12px;
}
form.gsc-search-box { font-size: 13px; margin-top: 0; margin-right: 0; margin-bottom: 4px; margin-left: 0; width: 100%;
}
#tertiary_nav li { float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; height: 20px; list-style-type: none; width: auto; color: #ccc; margin: 2px 0 0 0;
}
.cse form.gsc-search-box, form.gsc-search-box { padding: 8px 4px 2px 6px; margin-bottom: 6px;
}
ul { list-style-type: none; padding: 13px 0 0 0; margin: 0;
}
.gsc-search-button { padding: 5px;
}
.gsc-search-button:hover { cursor: pointer;
}
#filter-form { margin: 10px 10px 10px 0; background-color: #ebebeb; padding: 20px;
}
Search and Filter - Script Codes
Search and Filter - Script Codes
Home Page Home
Developer Sam Durphy
Username sdurphy
Uploaded September 24, 2022
Rating 3
Size 3,891 Kb
Views 14,168
Do you need developer help for Search and Filter?

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!

Sam Durphy (sdurphy) Script Codes
Name
Links and Buttons
Baltimore County Megamenu
BACO Style Guide - Tabs
BCnet TVoIP Template
Baltimore County Now Blog
Closing Information Concept
BACO Alternate Headings
BACO Headings
A Pen by Sam Durphy
BACO Style Guide - Media Galleries
Create amazing captions 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!