HTML Button With Search Icon? November 12, 2022 Post a Comment I'm trying to create a search button containing nothing but the magnifying glass search icon. Code is below Solution 1: You may use icons from Glyphicons or Font-Awesome, which are useful for icon design usage. Here's an example, using glyphicon's search icon <button class="icon"><i class="glyphicon glyphicon-search"></i></button> Copy Or using Font Awesome's search icon <button class="icon"><i class="fa fa-search"></i></button> Copy Solution 2: is that what you are looking for http://jsfiddle.net/cancerian73/t2FJb/ <div class="search-bar"> <input type="text" class="sfield" name="searchterm" maxlength="30" value="Search..."> <input type="image" class="searchbutton" name="search" src="http://www.spheretekk.com/bc/images/search-icon.gif" alt="Search"> Copy .search-bar { height: 29px; background-color: #e1e1e1; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; position:relative; width:230px } .search-bar .searchbutton { position:absolute; top:23%; right:5px; } .sfield { float: left; margin: 5px 0 0 8px; font: 8pt Verdana; color: #888; height: 20px; line-height: 18px; padding: 0; background: transparent; border: 0; max-width: 125px } Copy Solution 3: The background shorthand property mentioned by veer might be getting ignored by the browser as "no-repeat" is being written twice. Try writing it this way: background: url("") no-repeat fixed center; also check the path you specify in the url. if your images are in a separate folder you may have to add a "../" . Baca JugaHow To Close All The Menus Inside An Accordion In Angular 4Fixed Sidebar, Scrollable ContentContent Hiding Above Div's P.S. Although it may not be needed for your case it is good practice to mention the properties like background-position(center in above case). Sometimes otherwise the entire property gets ignored by the browser. I'm not sure however why this happens neither am i sure if this is actually a problem or it was just some other error in my code. Does not happen always but i have faced this issue 2-3 times. Solution 4: Well, you are quite right with the CSS. Try this, may this work. I am not sure about it. <input type="button" value="" id="searchButton" /> Copy Add CSS: #searchButton: { background:url('filepath') no-repeat no-repeat; width: 20px; height: 20px; border: 0px; } Copy Solution 5: Use FontAwesome Icon library and put <i class="fa fa-search"></i> inside your search button. * {box-sizing: border-box;} .form-group { display: -webkit-flex; -webkit-flex-wrap: wrap; display: flex; flex-wrap: wrap; margin-bottom: 1rem; } input { flex: 1 1 auto; font-weight: 400; height: calc(1.5em + 1rem + 2px); padding: .5rem 1rem; font-size: 1.25rem; line-height: 1.5; color: #495057; background-color: #fff; border: 1px solid #ced4da; border-radius: .3rem 0 0 .3rem; outline: 0; } button { font-weight: 400; color: #ffffff; cursor: pointer; text-align: center; user-select: none; border: 1px solid transparent; padding: .5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: 0 .3rem .3rem 0; background-color: #007bff; outline: 0; }Copy <!-- Load an icon library --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <form action=""> <div class="form-group"> <input type="text" placeholder="search..."> <button type="submit"><i class="fa fa-search"></i></button> </div> </form>Copy Share You may like these postsHow To Randomly Assign A Color On Hover EffectCss - Ul Background Not WorkingHow To Insulate Html Widget From External CssHow To Place A Div In The Top Right Corner Using Twitter Bootstrap Post a Comment for "HTML Button With Search Icon?"
Post a Comment for "HTML Button With Search Icon?"