1

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 ?

1
  • 1
    dont use a transparent png, or put the img in a div which has the same backgroundcolor. why didnt you make a div with rounded shape add the search icon and then put the input in it which isnt as long that it can reach the search icon
    – user3299259
    Mar 5, 2014 at 2:59

1 Answer 1

2

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.