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

Ways to extract the coordinates for slices positioned around the circumference of a pie chart

Discover the secret to easily displaying or concealing the form of your choice with the perfect fields

Is the form data in AngularJS not submitting correctly?

endless cycle of scrolling for div tags

Customize the keyboard on your iPod by replacing the default one with a

Invoking a static method within a cshtml document

Apply the CSS style to make one element identical to another, while modifying a single property

Content and visual side by side

Ways to Press the Enter Key on Different Browsers

The CSS child selector seems to be malfunctioning as it is affecting all descendants of the specified type

Avoiding HTML code within XML

Can I use Javascript to access a span element by its class name?

Choose the first element of its type and disregard any elements nested within it

What is the best way to format a condensed script into a single line?

How can I set a background image to automatically adjust to the width of the window, be full height, allow for vertical scrolling, and

Transfer certain options to another selection except for the one currently chosen in the first one

Ways to increase the font size of input text using bootstrap's css framework

The Ineffectiveness of Social Media Sharing in WordPress

Issue with submitting input fields that were dynamically added using jquery

What is the reason for using grid-lines instead of row and column numbers to position an item on the CSS grid?