What is the best way to position a search icon on the right side using CSS?

I am trying to figure out how to display a search icon image on the right side using CSS, but so far I have been unsuccessful. Here is the code that I have:

The CSS code:

.search {
    background: url(../images/icons/search.png) no-repeat;
    display:inline;
    vertical-align:-0px;
}

The HTML code:

<ul class="sidebar-nav" id="MainMenu">
    <li style="border-bottom:none">
        <a href="#">
            <img src="images/logo.png">
        </a>
    </li>
    <li class="left">
        <a href="#">
            <input type="text" class="search" style="border: 0">
        </a>
    </li>
</ul>
htmlcss

Answer №1

Click for Demo

Custom CSS Code:

.search-bar {
    position:relative;
    top:5px;
    /* readjustment in jsfiddle */
    padding:10px 6px 10px 32px;
    background:white url(http://i.imgur.com/lFkqn.png) right center no-repeat;
}

Your updated HTML snippet:

<ul class="menu-items" id="MainNav">
    <li style="border-bottom:none">
        <a href="#">
            <img src="images/logo.jpg"/>
        </a>
    </li>
    <li class="right">
        <a href="#">
            <input type="text" class="search-bar" style="border: none" />
        </a>
    </li>
</ul>

Answer №2

Apply the position top right and experiment with this approach.

 .search {
     background: url(../images/icons/search.png) no-repeat top right;
     display:inline;
     vertical-align:0px;
    }

Answer №3

When using a background image, you have the flexibility to position it to the right or left. You do not need to include display:inline;.

I also noticed that your HTML markup is invalid; the closing </li> tag is missing. Additionally, you have placed an input element inside an a tag.

.search {background: url("http://lorempixel.com/16/16/") no-repeat top right; }

Answer №4

      .finder {
         background: url(../images/icons/search.png) no-repeat top right;
         display:inline;
         vertical-align:-0px;
        }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What should I do to resolve the issue of the function if ($(window).width() < 768) {} not functioning properly upon resizing the browser?

I am working on a functionality where the navigation bar items will toggle hidden or shown only when the browser width is less than 768px and an element with the class "navlogo" is clicked. I have included my code below for reference. if ($(window).width( ...

javascriptjqueryhtmlcssangularjs

Issues with ng-bind-html in AngularJS and JavaScript are preventing it from functioning

I am experimenting with creating a dynamic webpage that can change its contents without being limited to predefined templates (potentially offering infinite template options). Below is the code I am currently testing: <!DOCTYPE html> <html lang= ...

javascripthtmlangularjs

The functionality of CSS scroll snap does not seem to be compatible with the CSS Grid

When utilizing CSS scroll snap with Flexbox, the snapping functionality works adequately: * { box-sizing: border-box; margin: 0; padding: 0; } .slider { font-family: sans-serif; scroll-snap-type: mandatory; scroll-snap-points-y: repeat(100vw ...

htmlcsscss-grid

CSS layout: The full-width header should align its left margin with the centered content-div

Can someone help me out with a solution to my problem? My page has a 1040px centered div for content, menu, and footer. I want the header image to align with the left margin of the content div and expand towards the right side for higher screen resolutio ...

cssweb-applicationshtmlpositioning

jQuery not refreshing properly

I'm currently in the process of creating a script to switch the language on a website using PHP and Ajax/jQuery. I would like the page content to refresh without having to reload the entire page. So far, this is what I have come up with: $( "a[data-r ...

javascriptphpjqueryhtmlajax

Tips on changing font color within an email body in Outlook using a C#.NET Windows application

While working on a c#.net windows application, I encountered an issue with setting font color for specific lines in the email body when sending mail to Outlook. Despite trying various methods, I was unable to find a solution. Below is a snippet of my code: ...

c#htmlfontsoutlook

Manipulating contextual selectors

Have you ever tried reverting or overriding attributes from contextual selectors? .card { padding-top: 20px; ... } .card .card-header { padding: 0 20px; } .card .card-header.news { padding-top: 0px; } Do you think it's possible to elimina ...

cssinheritancecss-selectors

Styling Challenge: Making the button inside a form match the design of the button outside the form

I have noticed that the button inside a form has a lot more padding around it compared to the one outside of the form. I am trying to adjust the within-form button so that it matches the padding of the without-form button. HTML/PHP <?php if (! ...

htmlcssforms

What is the method for adjusting the font size of the label in an Angular mat-checkbox element?

I've been trying to adjust the font size of a mat-checkbox's label, but no matter what I do, the component's default styles keep overriding my changes: Using !important Trying ::ng-deep Applying a global style in styles.scss <mat-checkb ...

cssangularangular-materialangular-forms

The inclusion of the <div> tag disrupts the functionality of the Material UI Grid

While attempting to enclose my element within a <div> that is nested inside the <Grid>, I realized that this was causing the <Grid> layout to break! Surprisingly, when I tried the same approach with Bootstrap grid system, this issue did n ...

cssreactjsmaterial-ui

I'm looking to add a price ticker to my html webpage. Does anyone know how to do this?

PHP Code <?php $url = "https://www.bitstamp.net/api/ticker/"; $fgc = file_get_contents($url); $json = json_decode($fgc, true); $price = $json["last"]; $high = $json["high"]; $low = $json["low"]; $date = date("m-d-Y - h:i:sa"); $open = $json["open"]; ...

javascriptphpjqueryhtml

CSS3 animations with background-image for Firefox are an exciting way to enhance the

I am currently working on a keyframe animation project using CSS. The animation is running smoothly in Chrome with supported -webkit syntaxes. @-webkit-keyframes title_toggle { from { background-image:url(images/title.png); } 75%{ background-image:url(im ...

htmlcssfirefoxanimationkeyframe

What are the benefits of using Semantic mark-up and WAI-ARIA in a Tabbed Section?

Currently working on the structure of a website and aiming to improve accessibility skills. I'm curious about the most appropriate way to mark up tabbed content. Here's what I have so far: <section> <nav> <a href="#tab" aria ...

htmlaccessibilitywai-aria

What could be causing jQuery animate to malfunction on mobile devices when a viewport is present?

Everything seems to be working fine on my desktop webpage, but when I try it on mobile, there is no scroll... $("HTML, BODY").animate({ scrollTop: 500 }, 1000); This post suggests that mobile devices may not scroll on the body, but on the vi ...

javascriptjquerycssmobile

Issues with Toggling Visibility in HTML, CSS, and Javascript

Currently, I am working on a website and following a tutorial called "Creating Slideshow using HTML, CSS, and Javascript" by W3Schools. In the project, I want to hide the thumbnail images located at the bottom and the navigation arrows initially and have t ...

javascripthtmlcssvisible

Ways to transition to an iframe window

I am having difficulty selecting an iframe popup window as it is not coming into focus. Below is the image of the popup window along with the button I am attempting to click: https://i.stack.imgur.com/VzkOX.png This is the code snippet that I have been ...

pythonhtmlseleniumselenium-webdriver

Having difficulty in getting a hyperlink to open in a new tab with _blank attribute

I'm currently working with this code for my link. <a href="https://dribbble.com/jamesfrewin"><img class="socialicon" src="images/icons/dribbble_dark.png" onmouseover="this.src='images/icons/dribbble_pink.png'" onmouseout="this.src= ...

htmlhyperlink

deleting multiple items with checkbox selection in Angular 2

Can anyone provide the code for both the component and service to implement multiple deletion using checkboxes in Angular 2? I have only posted the HTML code, but I need assistance with the components and services as well. The current code allows single ...

htmlangular

Struggling to align block elements correctly after changing them to inline

I've been trying to align this paragraph while keeping the navigation menu and logo in their correct positions. I attempted to make everything inline, but that didn't work. Then I experimented with the float property, which only made things worse ...

csshtmlhyperlink

The cascading style sheet used by a lightbox

I constructed a lightbox using the following HTML code: <a id="show-panel" href="#">Show Panel</a> <div id="lightbox-panel"> <h2>Lightbox Panel</h2> <p>You can add any valid content here.</p> <p align="center" ...

jqueryhtmlcsslightbox