Search box with SVG icon
How do I make an search box with svg icon?
What is a search box with svg icon? How do you make a search box with svg icon? This script and codes were developed by Amy Kapernick on 30 August 2022, Tuesday.
Search box with SVG icon - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Search box with SVG icon</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="inner"> <div class="search"> <div class="moduletable"> <form action="/" method="post" class="form-inline"> <input name="searchword" id="mod-search-searchword" maxlength="200" class="inputbox search-query" type="text" size="20" value="Search ..." onblur="if (this.value=='') this.value='Search ...';" onfocus="if (this.value=='Search ...') this.value='';"> <input type="submit" value="" class="button btn btn-primary" onclick="this.form.searchword.focus();"> <input type="hidden" name="task" value="search"> <input type="hidden" name="option" value="com_search"> <input type="hidden" name="Itemid" value="154"> </form> </div> <svg id="object" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 281.57 315.19"><defs><style>.cls-1,.cls-2{fill:#fff;}.cls-2{stroke:#fff;stroke-miterlimit:10;}</style></defs><title>search</title><path class="cls-1" d="M1501.72,603.79l-62.2-76.65-33.4,28.14,61.69,76a16.33,16.33,0,0,0,23,2.39l8.55-6.94A16.33,16.33,0,0,0,1501.72,603.79Z" transform="translate(-1223.81 -322.16)"></path><path class="cls-1" d="M1412.81,506.51c-.93-13.43-11.21-14.5-18.21-8.82l-8.55,6.94c-7,5.68-8.07,16,5.51,18.25l22.16,26.56,20.51-17.09Z" transform="translate(-1223.81 -322.16)"></path><path class="cls-2" d="M1407.38,522.18a112.34,112.34,0,1,1,16.45-158A112.47,112.47,0,0,1,1407.38,522.18Zm-123-151.52a82.79,82.79,0,1,0,116.46,12.12A82.88,82.88,0,0,0,1284.43,370.66Z" transform="translate(-1223.81 -322.16)"></path></svg> </div>
</div>
</body>
</html>
Search box with SVG icon - Script Codes CSS Codes
* { box-sizing: border-box;
}
body { background: blue;
}
.inner { z-index: 10;
}
.search { background: rgba(255, 255, 255, 0.2); display: block; position: absolute; right: 25px; top: 22px;
}
.search input[type="text"] { background: transparent; border: none; height: 30px; float: left; width: 193px;
}
.search input[type="submit"] { background: red; border: none; height: 30px; float: right; padding: 0; width: 30px;
}
.search input[type="submit"]:hover { border: none;
}
.search svg { height: 30px; padding: 6px 10px 6px 2px; position: absolute; right: 0; top: 0; z-index: 14;
}
.search svg:hover { cursor: pointer;
}
.search svg:hover .cls-1, .search svg:hover .cls-2 { fill: blue;
}
.modulestable { z-index: 20;
}
.modulestable input[type="submit"] { position: relative; z-index: 20;
}
svg { z-index: 10;
}
Developer | Amy Kapernick |
Username | aimhigherwebdesign-amy |
Uploaded | August 30, 2022 |
Rating | 3 |
Size | 2,868 Kb |
Views | 34,408 |
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 |
WebEx Troubleshooting | 12,011 Kb |
AV Venues Page | 10,901 Kb |
Triangles | 2,371 Kb |
Gulpfile | 1,765 Kb |
Corner Triangle | 2,082 Kb |
Email Signature | 2,726 Kb |
Nutrition Calculator | 2,468 Kb |
Portfolio Page | 2,956 Kb |
Battle Against the Dragon | 4,524 Kb |
Enquire Now Button with SVG | 1,816 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 |
Display properties | Hamzaerbay | 1,886 Kb |
Wikipedia Viewer | Thomasvaeth | 2,549 Kb |
HTML5 Video Autoplay | Zivcos | 1,352 Kb |
Blackberry Mock | Zacharyolson | 1,865 Kb |
The CodePen Logo | Kindofone | 4,259 Kb |
CSS3 Latte Art Logo | Esambino | 2,036 Kb |
Another brick in the wall | Fivera | 1,955 Kb |
Two Element Typeface | Chrisota | 4,942 Kb |
The Monty Hall Problem | Melatonind | 4,360 Kb |
Flying Bee | Pwsm50 | 3,711 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!