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

"Learn how to transfer a selected value from a parent ASP.NET dropdownlist to a textbox in a popup window using JavaScript

I'm struggling to pass the value from a dropdown list in the parent ASPX form to a textbox in the child ASPX form. Parent JavaScript: The first script is used to open the popup window <script type="text/javascript"> var popup; ...

c#javascripthtmlasp.net

What is the process for updating a placeholder text after the user makes a guess or enters

My latest project involves creating a fun guessing game where players have to identify the driver based on the teams they have driven for. The game displays the number of guesses allowed and keeps track of how many attempts the player has made so far. For ...

javascripthtmlplaceholder

Obtain the checkbox status using node.js

I'm trying to access the checkbox value from req.body in a node.js application. However, when I log it, it keeps showing as 'undefined.' HTML <label> <input name='sell' type='checkbox' value='fals ...

htmlnode.jscheckboxrequest

Ways to position loading animation in the center and create a lightbox effect for the rest of the page

I have implemented a custom loader in CSS with the following styles: .loader { border: 16px solid #f3f3f3; /* Light grey */ border-top: 16px solid #3498db; /* Blue */ border-radius: 50%; width: 80px; height: 80px; animation: spin 2s linear inf ...

javascripthtmlcssvue.js

Stylish dropdown menu design inspired by W3CSS website

I recently implemented a CSS dropdown menu example that I found on a website, but it's not working with my code. I double-checked for typos but couldn't find any. Even when I tried to directly copy the code and replace the content with my own, i ...

htmlcssdropdown

Setting the height using CSS so it matches the height of the following class

Could someone assist me with a question I have? I am using a CSS class in my HTML code, like this: .boxBooking { width: 14.28%; } <div class="boxBooking"> .... </div> <div class="boxBooking"> test<br/> test <br/> & ...

htmlcssheight

Building a dynamic hierarchical list in Angular 8 with recursive expansion and collapse functionality

I am attempting to construct a hierarchical expand/collapse list that illustrates a parent-child relationship. Initially, the parent nodes will be displayed. If they have children, a carat icon is shown; otherwise, a bullet icon appears. When the carat ico ...

htmlangulartypescript

Prevent span/button clicks by graying them out and disabling the ability to click using HTML and JQuery

I am facing a challenge with my two spans that reveal specific information when clicked. I want to make one span appear as a disabled button (greyed out) when the other span is clicked. I tried using $("#toggle-odd").attr("disabled", tr ...

javascripthtmljquerybootstrap-5

Header width does not fully occupy the available space

I'm working on a table that includes a div element for adding a header to it. <div class="table-responsive"> <table class="table"gt; <thead> <div class="topPic"><span><i class="fa fa-tree fa-2x"></i>< ...

htmlcssresponsive-design

What could be causing my Ionic button to not initialize in the expected state while using ngIf with a boolean property connected to an Ionic checkbox?

I'm currently in the process of setting up a list of ingredients with checkboxes and conditional buttons, but I'm facing some challenges with the default state. Ideally, I only want the button to be visible when the checkbox is unchecked so that ...

javascripthtmlangularionic-frameworkangular-ng-if

I am experiencing an issue with my localhost website where the images only display after I open the files in VScode. Is there a way to load the images correctly using app.js?

app.js While working on web development in VScode, I've encountered an issue where the images on my localhost website only appear after opening files like home.pug and contact.pug alongside app.js. Is there a way to make the images load properly witho ...

javascripthtmlnode.jsexpresspug

How do I add a "Switch to Desktop Site" link on a mobile site that redirects to the desktop version without redirecting back to the mobile version once it loads?

After creating a custom mobile skin for a website, I faced an issue with looping back to the mobile version when trying to add a "view desktop version" link. The code snippet below detects the screen size and redirects accordingly: <script type="text/j ...

javascripthtmlmobile

What can I do to remove the hidden <p> tags that Wordpress is inserting into my HTML code?

There seems to be some extra space appearing between my divs (inside a main div) that is possibly due to unexpected <p> and </p> tags being added by WordPress. This issue is quite common with WP, but the problematic tags are hidden so I am unab ...

htmlcsswordpress

Adding a stylesheet dynamically in Angular 2: A step-by-step guide

Is there a method to dynamically add a stylesheet URL or <style></style> in Angular2? For instance, if the variable isModalOpened is set to true, I want to apply certain CSS styles to elements outside of my root component, such as the body or ...

javascripthtmlcssangularangular2-template

Align a single item to the right in PrimeNG p-menubar

I am currently utilizing PrimeNG 8.1.1 and I am looking for a way to align one of the items to the right side (specifically the submenu options of logout and profile). Does anyone have any suggestions? this._menuItems = [ { labe ...

cssangularprimeng

Tips for inserting HTML into elements using Angular

Recently, I delved into Angular and decided to experiment with Ajax by fetching a document to display on my webpage. The process worked flawlessly, but now I face a new challenge: injecting HTML content into a DOM element dynamically. Typically, this task ...

javascripthtmlangularjs

Modify the body tag upon loading the page for Bootstrap 2.0

I'm currently utilizing bootstrap on my website, and I have implemented scrollspy with bootstrap. However, I am facing an issue where adding scrollspy to other pages causes my links to behave unexpectedly. Is there a way to simply incorporate the foll ...

jqueryhtmlcsstwitter-bootstrap

A JavaScript pop-up box with two windows

Struggling to create two separate dialog boxes using this code. The issue is that when I add the code for the second dialog box, it only appears if the first one does too. Here's the code for the first dialog: function showPopUp(el) { var ...

javascripthtml

Generating grid-style buttons dynamically using jQuery Mobile

I am in need of assistance to create a dynamic grid using jQuery Mobile. The grid should consist of buttons with either 'onclick' or 'href' functionality. The number of buttons should be generated dynamically at runtime. Specifically, I ...

javascriptjquerycsshtmljquery-mobile

Smooth-scrolling feature with touch interaction available in the scrollbar extension

Anyone here aware of a high-quality jQuery or CSS plugin for scrollbars that supports touch functionality and smooth easing? I've been on the lookout for one, but haven't had any luck so far. Even if it comes with a price tag, I'm interested ...

javascriptjquerycss