CODEWITHSUNDEEP
htmlcss
UserX
UserX

Reputation: 1327

How to insert an icon inside HTML `<input>` tag

Im not having sucess put my icon font inside my search input.

I already try with margin, padding, but nothing is working!

Can you give me a little help?

The fiddle with the problem:

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

My Html:

<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="Pesquisar..." />
      <button type="submit"><i class="fa fa-search"></i></button>
    </form>
</li>

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

Upvotes: 0

Views: 5630

Answers (3)

Andreas Storvik Strauman
Andreas Storvik Strauman

Reputation: 1655

You can't put an image inside an <input type='text'> element.

However, you can remove the borders of the input with:

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

and then wrap it with the icon inside a div and re-style.

Example code:

Here is a jsFiddle for you: http://jsfiddle.net/hxjY7/

Here is the code:

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

Upvotes: 2

Damon
Damon

Reputation: 4484

I think this is what you are trying to do. jsFilddle

HTML:

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

CSS:

form#search fieldset {
    position: relative;
    border: none;
}
form#search input[type='text'] {
    padding: 4px;
}
form#search button {
    position: absolute;
    top: 9px;
    left: 262px;
}

Upvotes: 0

Teknotica
Teknotica

Reputation: 1136

If you are trying to move the button inside the input field, you could set the button to position absolute (and the search wrapper to relative):

http://jsfiddle.net/Tj7nJ/3/

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

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

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

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

Upvotes: 1

Related Questions