CODEWITHSUNDEEP
csstwitter-bootstrap
Renaud is Not Bill Gates
Renaud is Not Bill Gates

Reputation: 2084

Add an icon to input text as a non part of it

I'm using bootstrap 2.3.2, and I have a form that contains an input text. In the right of the input text I have an icon.

enter image description here

And this is the html for that input text :

<div class="right-inner-addon">
    <input type="text" placeholder="Recherche un article" class="search-query">
    <i class="fa fa-search"></i>
</div>

And this is it's style :

.right-inner-addon input {
    padding-right: 30px;    
}
.right-inner-addon i {
    position: absolute;
    right: 0px;
    padding: 7px 12px;
    padding-left: 10px;
}

The problem is that when I type some long text, this text is written under that search icon :

enter image description here

I want when I write a long text to not be written under the search icon, how can I do that ?

Upvotes: 1

Views: 146

Answers (1)

Kheema Pandey
Kheema Pandey

Reputation: 10265

I've used the Bootstrap 2.3.2 version and use below CSS code to place the search icon at right side.

.right-inner-addon{position:relative;}
.right-inner-addon input {
    padding-right: 30px; 
    height:30px;
}
.right-inner-addon i {
    padding: 7px 12px;
    padding-left: 11px;
   position: absolute;
    top: 10px;
  right:0
   
}
.icon-search {
    background-position: -36px 3px;
}

and the HTML code look like this.

<form class="navbar-form pull-left form-search">
  <div class="right-inner-addon">
  <input type="text" placeholder="Recherche un article" class="search-query">
  <i class="icon-search"></i>
</div>
</form>

Here is the working Demo. https://refork.codicode.com/351.cod

Upvotes: 2

Related Questions