Search field
How do I make an search field?
What is a search field? How do you make a search field? This script and codes were developed by Sander on 18 December 2022, Sunday.
Search field - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Search field</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <h1 class="pageTitle">Search field</h1> <h2 class="pageSubTitle">A simple animated search field</h2> <p>Integer viverra tristique sollicitudin. Sed mattis hendrerit felis vitae aliquet. Quisque enim nisi, ornare ac tortor vel, pulvinar varius tortor. Aliquam magna magna, accumsan non pretium vitae, bibendum sit amet sem.</p>
</div>
<div class="wrapper"> <input class="searchField" type="text" name="search" />
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Search field - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Josefin+Slab:100,300,400,600,700);
/*
.fonts { font-family: 'Josefin Slab', serif;
}
*/
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
body { font-family: 'Josefin Slab', serif; font-size: 20px; line-height: 24px; color: #333; background: #ececec; overflow-y: scroll;
}
input { font-family: 'Josefin Slab', serif; font-size: 20px;
}
p { margin-bottom: 0.5em;
}
a,
a:visited { text-decoration: none; color: #00AE68;
}
.clear { clear: both;
}
.pageTitle { font-size: 2em; font-weight: 700; text-transform: uppercase; line-height: 1em; color: #00AE68;
}
.pageSubTitle { margin-bottom: 0.5em; font-size: 1.3em; font-weight: 700; line-height: 1em; color: #222;
}
.articleTitle { font-size: 1.15em; font-weight: 700; line-height: 1em; color: #222;
}
.wrapper { width: 600px; padding: 40px; margin: 40px auto; background: #fff;
}
input.searchField { width: 40px; height: 40px; padding: 20px 0 20px 40px; line-height: 40px; border: 0; background-color: #e0e0e0; background-image: url("https://cdn3.iconfinder.com/data/icons/token/Token,%20128x128,%20PNG/Search.png"); background-repeat: no-repeat; background-position: 10px center; background-size: auto 20px; border-radius: 30px; transition: all 0.5s ease; cursor: pointer;
}
input.searchField:focus { outline: none; width: 100%; background-position: 10px center; cursor: default;
}
Developer | Sander |
Username | skeurentjes |
Uploaded | December 18, 2022 |
Rating | 3 |
Size | 2,280 Kb |
Views | 8,096 |
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 |
Dropdown navigation | 3,158 Kb |
3D box | 2,899 Kb |
Sidenavigation | 3,421 Kb |
Flexbox layout | 3,615 Kb |
Accordion | 4,280 Kb |
Custom input radio buttons | 2,158 Kb |
Flexbox table | 4,118 Kb |
Horizontal navigation | 2,183 Kb |
Sticky widget | 3,762 Kb |
Simple gallery | 3,050 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 |
Tile Animation Thing | Frxnz | 4,332 Kb |
Rain Landing in a Pond | Edball | 3,009 Kb |
Personal Logo Animation | Lloydwheeler | 3,795 Kb |
Apex Calculator | Michaelwnelson | 2,370 Kb |
After America | Jonathangarner | 2,686 Kb |
Project Euler Problem 17 | Bfillmer | 2,739 Kb |
Zeichensatz | Moklick | 2,058 Kb |
Simple Login Form Template | Banunn | 3,571 Kb |
Polygon Dodecahedron in CSS | Vennsoh | 7,606 Kb |
Exploring css spinners | Akagr | 3,569 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!