Hidden Search
How do I make an hidden search?
What is a hidden search? How do you make a hidden search? This script and codes were developed by Jesper Hills on 13 October 2022, Thursday.
Hidden Search - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hidden Search</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background: #eee; font: 14px/18px Arial;
}
p { padding: 35px; font-size: 11px; color: #999;
}
.navigation { padding: 20px; border-bottom: 1px solid #ccc; box-shadow: 0 1px 0 #FFF;
}
.navigation li { display: inline-block;
}
.navigation li a { display: block; padding: 10px 15px; text-decoration: none; color: #333;
}
.navigation li a:hover,
.search:hover { color: #ff3333;
}
.search:focus { text-indent: 15px; background-position: 5px 50%; outline: none; border-color: #999; background-color: #fff; color: #333; cursor: text;
}
.search::-webkit-input-placeholder{ color:#333;}
.search::-moz-placeholder{ color:#333;}
.search:-ms-input-placeholder{ color:#333;}
input.search:-moz-placeholder{ color:#333;}
.search:hover::-webkit-input-placeholder{color:#ff3333;}
.search:hover::-moz-placeholder{color:#ff3333;}
.search:hover:-ms-input-placeholder{color:#ff3333;}
input.search:hover:-moz-placeholder{color:#ff3333;}
.navigation li a:hover,
.search:hover {color:#ff3333;}
.search:focus { text-indent: 15px; background-position: 5px 50%; outline: none; border-color: #999; background-color: #fff; color: #333; cursor: text;
}
.search::-webkit-input-placeholder{ color:#333;}
.search::-moz-placeholder{ color:#333;}
.search:-ms-input-placeholder{ color:#333;}
input.search:-moz-placeholder{ color:#333;}
.search:hover::-webkit-input-placeholder{color:#ff3333;}
.search:hover::-moz-placeholder{color:#ff3333;}
.search:hover:-ms-input-placeholder{color:#ff3333;}
input.search:hover:-moz-placeholder{color:#ff3333;}
.navigation li a:hover,
.search:hover {color:#ff3333;}
.search:focus { text-indent: 15px; background-position: 5px 50%; outline: none; border-color: #ccc; background-color: #fff; color: #333; cursor: text;
}
.search:focus::-webkit-input-placeholder{color:transparent;}
.search:focus::-moz-placeholder{color:transparent;}
.search:focus:-ms-input-placeholder{color:transparent;}
input.search:focus:-moz-placeholder{color:transparent;}
.search { transition: border-color 0.2s, background-color 0.2s, background-position 0.2s, text-indent 0.2s; font: 14px/20px Arial; color: #333; cursor: pointer; border: 1px solid #eee; padding: 10px 15px; border-radius: 3px; background-color: #eee; background-repeat: no-repeat; background-position: -20px 50%; background-image: url('data:image/gif;base64,R0lGODlhFAAUANUxALKysre3t7a2tuHh4eLi4ufn576+vsLCwuDg4O3t7enp6bS0tM3Nzezs7Li4uMfHx8zMzMvLy+jo6MbGxuvr67W1tcDAwNfX19HR0bOzs9bW1srKyuTk5Lu7u8HBwdTU1MnJyebm5t7e3s7Oztra2tXV1cjIyL+/v729vby8vN3d3ePj49DQ0Lm5ucXFxcPDw9/f3+7u7gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjEgNjQuMTQwOTQ5LCAyMDEwLzEyLzA3LTEwOjU3OjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2ODk0OUVCOEFFNTkxMUUyQkNGRTg0NDNFQjM5NTBBQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2ODk0OUVCOUFFNTkxMUUyQkNGRTg0NDNFQjM5NTBBQyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjY4OTQ5RUI2QUU1OTExRTJCQ0ZFODQ0M0VCMzk1MEFDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjY4OTQ5RUI3QUU1OTExRTJCQ0ZFODQ0M0VCMzk1MEFDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAQAAMQAsAAAAABQAFAAABq7AmDBGiKAcDgOEM2wOKZAMYErNjBpOYeNABQgq3UkiG6E+BgoFYkJlOAfUTxYzXRCam+kjK3RN3UMpUwh8MSJTHk0BXgqFBWAdWEKLAhKFIQsAHWNCBlMqhSRTB00MUy98CR5TLE0cmQAQTgkgUwIFTnRTJxcEBBqetndOeV3GUw4rWSUCxy2LUwEDWRIaDxYWJhcUA9AA0oVZCM3RhOFN3VSk5+iLBrjsTTAHuEEAOw==');
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <ul class="navigation"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li> <input type="text" class="search" placeholder="Search" /> </li> </ul>
<p>(Hint: Click the 'Search' link)</p> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Hidden Search - Script Codes CSS Codes
body { background: #eee; font: 14px/18px Arial;
}
p { padding: 35px; font-size: 11px; color: #999;
}
.navigation { padding: 20px; border-bottom: 1px solid #ccc; box-shadow: 0 1px 0 #FFF;
}
.navigation li { display: inline-block;
}
.navigation li a { display: block; padding: 10px 15px; text-decoration: none; color: #333;
}
.navigation li a:hover,
.search:hover { color: #ff3333;
}
.search:focus { text-indent: 15px; background-position: 5px 50%; outline: none; border-color: #999; background-color: #fff; color: #333; cursor: text;
}
.search::-webkit-input-placeholder{ color:#333;}
.search::-moz-placeholder{ color:#333;}
.search:-ms-input-placeholder{ color:#333;}
input.search:-moz-placeholder{ color:#333;}
.search:hover::-webkit-input-placeholder{color:#ff3333;}
.search:hover::-moz-placeholder{color:#ff3333;}
.search:hover:-ms-input-placeholder{color:#ff3333;}
input.search:hover:-moz-placeholder{color:#ff3333;}
.navigation li a:hover,
.search:hover {color:#ff3333;}
.search:focus { text-indent: 15px; background-position: 5px 50%; outline: none; border-color: #999; background-color: #fff; color: #333; cursor: text;
}
.search::-webkit-input-placeholder{ color:#333;}
.search::-moz-placeholder{ color:#333;}
.search:-ms-input-placeholder{ color:#333;}
input.search:-moz-placeholder{ color:#333;}
.search:hover::-webkit-input-placeholder{color:#ff3333;}
.search:hover::-moz-placeholder{color:#ff3333;}
.search:hover:-ms-input-placeholder{color:#ff3333;}
input.search:hover:-moz-placeholder{color:#ff3333;}
.navigation li a:hover,
.search:hover {color:#ff3333;}
.search:focus { text-indent: 15px; background-position: 5px 50%; outline: none; border-color: #ccc; background-color: #fff; color: #333; cursor: text;
}
.search:focus::-webkit-input-placeholder{color:transparent;}
.search:focus::-moz-placeholder{color:transparent;}
.search:focus:-ms-input-placeholder{color:transparent;}
input.search:focus:-moz-placeholder{color:transparent;}
.search { transition: border-color 0.2s, background-color 0.2s, background-position 0.2s, text-indent 0.2s; font: 14px/20px Arial; color: #333; cursor: pointer; border: 1px solid #eee; padding: 10px 15px; border-radius: 3px; background-color: #eee; background-repeat: no-repeat; background-position: -20px 50%; background-image: url('data:image/gif;base64,R0lGODlhFAAUANUxALKysre3t7a2tuHh4eLi4ufn576+vsLCwuDg4O3t7enp6bS0tM3Nzezs7Li4uMfHx8zMzMvLy+jo6MbGxuvr67W1tcDAwNfX19HR0bOzs9bW1srKyuTk5Lu7u8HBwdTU1MnJyebm5t7e3s7Oztra2tXV1cjIyL+/v729vby8vN3d3ePj49DQ0Lm5ucXFxcPDw9/f3+7u7gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjEgNjQuMTQwOTQ5LCAyMDEwLzEyLzA3LTEwOjU3OjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2ODk0OUVCOEFFNTkxMUUyQkNGRTg0NDNFQjM5NTBBQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2ODk0OUVCOUFFNTkxMUUyQkNGRTg0NDNFQjM5NTBBQyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjY4OTQ5RUI2QUU1OTExRTJCQ0ZFODQ0M0VCMzk1MEFDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjY4OTQ5RUI3QUU1OTExRTJCQ0ZFODQ0M0VCMzk1MEFDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAQAAMQAsAAAAABQAFAAABq7AmDBGiKAcDgOEM2wOKZAMYErNjBpOYeNABQgq3UkiG6E+BgoFYkJlOAfUTxYzXRCam+kjK3RN3UMpUwh8MSJTHk0BXgqFBWAdWEKLAhKFIQsAHWNCBlMqhSRTB00MUy98CR5TLE0cmQAQTgkgUwIFTnRTJxcEBBqetndOeV3GUw4rWSUCxy2LUwEDWRIaDxYWJhcUA9AA0oVZCM3RhOFN3VSk5+iLBrjsTTAHuEEAOw==');
}
Hidden Search - Script Codes JS Codes
/* Navigation: Hidden Search
*/
Developer | Jesper Hills |
Username | nopr |
Uploaded | October 13, 2022 |
Rating | 3 |
Size | 5,482 Kb |
Views | 14,168 |
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!
Name | Size |
Vertically rotating text with CSS | 2,141 Kb |
Triangular logo, scales to font size | 2,530 Kb |
DRY-BEM with SCSS | 2,211 Kb |
Full-height content with footer below fold | 2,350 Kb |
Using label to style File Input | 2,646 Kb |
CSS3 Text Masking | 2,609 Kb |
Click-activated fluid width slider | 2,567 Kb |
Peeling Button | 2,214 Kb |
CSS3 Record Collection | 3,602 Kb |
CSS Radar, variable speed | 4,382 Kb |
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!
Name | Username | Size |
Obligatory CSS3 UI Nav | Romandiaz | 9,017 Kb |
Form Labels | Bartuc | 2,717 Kb |
Click handler test | Snapson | 2,329 Kb |
Nav Test -- cats 1 | Payls | 4,735 Kb |
VerbalExpressions Converter | Cmalven | 2,607 Kb |
Highbrow Basic HTML Lesson 7 | Kimlarocca | 1,662 Kb |
CSS Clip and Shape Module clearly | Pestov | 2,640 Kb |
Mondrian | Chrisarmstrong | 2,787 Kb |
Multicolumns 2 | Raphaelgoetter | 1,857 Kb |
Knob rotation | Alemesre | 2,122 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!