How to display search icon on right side through css?


Tags: html,css

Problem :

I want to display search icon image on the right side through css, but unable to do so. Here's the code:

CSS:

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

HTML:

<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>


Solution :

Demo

css

.search {
    position:relative;
    top:2px;
    /* readujst in jsfiddle */
    padding:8px 5px 8px 30px;
    background:white url(http://i.imgur.com/lFkqn.png) right center no-repeat;
}

and your corrected html

<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>

    CSS Howto..

    How can I make jQuery's draggable function expand the container?

    how to set individual scroll for content and left menu

    .addClass - How to call CSS from linked css?

    How can I select my font awesome icons in CSS?

    How to make an entire div clickable with CSS [closed]

    how change all fonts of a telerik control by one shot

    How to prioritize custom css over the default Angular-material css

    CSS - How to insure that a input will be in the middle of a specific area

    How do I make CSS hover transitions animate on mouse off AND mouse over, and replicate that in jQuery?

    How to add padding to 100% div in Bootstrap?

    How to make UL Tabs with only HTML CSS

    How to automatically resize a box to fit content — with jQuery Mobile

    Style
  • element with CSS background, to show only a part of images
  • How can I apply a css transition to an element when its parent is hovered?

    How to move image slowly with animation when appending the image to tag

    How to indent input controls for a nested HTML list using CSS to a single column

    How to align tags withina div

    If you remove float: left they are centred, in combination with setting text-align: center with their parent div. That is, their immediate (first) parent div; give this an id....
    Read more

    How to align text next to a “div” in HTML/CSS?

    how to prevent vertical Stepdown

    How to use several css classes to one element?

    $(document).on(“click”… how to collapse a list when clicking anywhere else on the document

    How does -ms-view-state differ from standard CSS Media Queries Expressions?

    CSS - how to apply styles to first elements in a static generated list

    How to add space after a colon in CSS with Sublime Text 2?

    Chrome DevTools Converts All HEX Colors to RGB: how to stop?

    how to specify background text rectangle color in CSS

    how to remove and add css class to a specific textbox inside gridview in c# asp.net?

    How to set CSS rules for input, except one type

    How to Automatically adjust width in CSS so horizontal scrollbars would adjust automatically without taking so much space?

    how to compute Facebook graph api cover offset_y to pixel?