Guide to adding an icon within an HTML `<input>` element

Question

Guide to adding an icon within an HTML `<input>` element

Is anyone able to help me successfully place my icon font inside the search input field? I've tried adjusting the margin and padding, but nothing seems to be working!

If you have any insights or suggestions, please let me know. Your help is greatly appreciated.

Please check out the issue in this fiddle:

http://jsfiddle.net/Tj7nJ/1/

This is a snippet of my HTML code:

<li id="sb-search" style="float:right; list-style:none; height:20px; bottom:3px; ">
        <form id="search">
          <input name="q" type="text" size="40" placeholder="Search..." />
          <button type="submit"><i class="fa fa-search"></i></button>
        </form>
    </li>

And here's a snippet of my CSS:

#search {

        outline:none ;
        border:none ;

    }

    #search button[type="submit"] {

        width: 20px;
        background:none;
        cursor:pointer;
        height:20px;
    }

    button[type="submit"]>i:hover
    {     
        color: #fff;

    }   

    button[type="submit"]>i
    {
        background:none;
        color:#ccc;
        font-size:1.1em; 
    }


    #search input[type="text"] 
    {
        border: 0 none;
        background: #141d22;
        text-indent: 0;
        width:110px;
        padding: 6px 15px 6px 35px;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
    }

html css

Answer 1

Answer №1

Placing an image inside an <input type='text'> element is not possible.

But you can eliminate the borders of the input using:

input[type='text'] {
    background-color:transparent;
    border: 0px solid;
}

and then enclose it with the icon in a div and apply new styles.

Sample code:

Check out this helpful jsFiddle link: http://jsfiddle.net/hxjY7/

Code snippet below:

<style type="text/css">
    #textBoxWrapper{
        border: 1px solid black;
        width: 172px;
        height: 20px;
    }

    #textBox {
        background-color:transparent;
        border: 0px solid;
        width: 150px;
        height: 20px;
        float:left;
    }
    #icon{
        width: 20px;
        height: 20px;
        background-color: grey;
        float:left;
    }
</style>

<div id="textBoxWrapper">
<div id="icon"></div>
<input type="text" id="textBox" />
</div>

Answer 2

Placing an image inside an <input type='text'> element is not possible.

But you can eliminate the borders of the input using:

input[type='text'] {
    background-color:transparent;
    border: 0px solid;
}

and then enclose it with the icon in a div and apply new styles.

Sample code:

Check out this helpful jsFiddle link: http://jsfiddle.net/hxjY7/

Code snippet below:

<style type="text/css">
    #textBoxWrapper{
        border: 1px solid black;
        width: 172px;
        height: 20px;
    }

    #textBox {
        background-color:transparent;
        border: 0px solid;
        width: 150px;
        height: 20px;
        float:left;
    }
    #icon{
        width: 20px;
        height: 20px;
        background-color: grey;
        float:left;
    }
</style>

<div id="textBoxWrapper">
<div id="icon"></div>
<input type="text" id="textBox" />
</div>

Answer 3

Answer №2

If you want to adjust the positioning of the button within the input field, one way to do it is by setting the button to have a position of absolute (and making the search wrapper relative):

http://jsfiddle.net/K7hRt/4/

#search {
    outline: none;
    border: none;
}

#search {
    position: relative;
    z-index: 1;
}

#search button[type="submit"] {
    width: 25px;
    background: none;
    cursor: pointer;
    height: 25px;
    z-index: 2;
    position: absolute;
    top: 5px;
    right: 15px;
}

button[type="submit"]>i:hover {
    color: #eee;
}

button[type="submit"]>i {
    background: none;
    color: #999;
    font-size: 1em;
}

#search input[type="text"] {
    border: 0 none;
    background: #1c282d;
    text-indent: 0;
    width: 120px;
    padding: 8px 18px 8px 40px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
}

Answer 4

If you want to adjust the positioning of the button within the input field, one way to do it is by setting the button to have a position of absolute (and making the search wrapper relative):

http://jsfiddle.net/K7hRt/4/

#search {
    outline: none;
    border: none;
}

#search {
    position: relative;
    z-index: 1;
}

#search button[type="submit"] {
    width: 25px;
    background: none;
    cursor: pointer;
    height: 25px;
    z-index: 2;
    position: absolute;
    top: 5px;
    right: 15px;
}

button[type="submit"]>i:hover {
    color: #eee;
}

button[type="submit"]>i {
    background: none;
    color: #999;
    font-size: 1em;
}

#search input[type="text"] {
    border: 0 none;
    background: #1c282d;
    text-indent: 0;
    width: 120px;
    padding: 8px 18px 8px 40px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
}

Answer 5

Answer №3

It seems like this could be the solution you are looking for. Example Link

HTML Code:

<form id="search-box" action="#" method="post">
    <fieldset>
        <input type="text" id="query" name="query" size="30" placeholder="Search here..." />
        <button type="submit"><i class="fa fa-search"></i>
        </button>
    </fieldset>
</form>

CSS Code:

form#search-box fieldset {
    position: relative;
    border: 1px solid #ccc;
}
form#search-box input[type='text'] {
    padding: 6px;
}
form#search-box button {
    position: absolute;
    top: 10px;
    left: 280px;
}

Answer 6

It seems like this could be the solution you are looking for. Example Link

HTML Code:

<form id="search-box" action="#" method="post">
    <fieldset>
        <input type="text" id="query" name="query" size="30" placeholder="Search here..." />
        <button type="submit"><i class="fa fa-search"></i>
        </button>
    </fieldset>
</form>

CSS Code:

form#search-box fieldset {
    position: relative;
    border: 1px solid #ccc;
}
form#search-box input[type='text'] {
    padding: 6px;
}
form#search-box button {
    position: absolute;
    top: 10px;
    left: 280px;
}

Guide to adding an icon within an HTML `<input>` element

Answer №1

Answer №2

Answer №3

Similar questions

I'm looking for a way to retrieve an object from a select element using AngularJS. Can

The function element.checked = true/false in Vanilla Javascript seems to be malfunctioning

Updating and managing the CSS style for button states

What is causing the issue with using classes in Javascript to clear the form?

Exploring Webpack: Unveiling the Contrasts Between Production and Development CSS Bundles

Updating the Navigation Bar and Theme in CRM Dynamics 2013 to Reflect Your Organization's Branding

Using Paypal API in PHP to create a payment form

Initial space in model variable not being displayed

What are the steps to stop the left alignment of header text?

Firebase hosting adjusts the transparency of an element to 1% whenever it detects the presence of CSS opacity

Locate a Sub-Child href Element using Selenium

Utilizing PNG images with color in CSS, HTML, or JavaScript

Issues with zoom functionality not functioning properly within IE11

What is the process for transforming information from a database into a clickable hyperlink?

Update the picture displayed in the parent div when it is in an

The color scheme detection feature for matching media is malfunctioning on Safari

Using jQuery to target form elements that have a specific class assigned to them

Unable to implement Bootstrap 5 Hamburger Animation - Looking for solutions

What is the method for adjusting the subheader color on a Material UI card component?

What is the best way to verify the font-family using JavaScript?