I'm trying to embed 'search.svg' image into textbox in AngularJS as shown in the image below

But I didn't get expected result. It's rendering like shown in the image below

I have tried - My html file

<div class="right-inner-addon pull-left col-lg-4">
    <input type="text" class="form-control input-append" />
    <img role="img" src="img/icons/search.svg" />
</div>

My CSS file

.right-inner-addon {
    position: relative;
}
.right-inner-addon input {
    padding-right: 30px;
}
.right-inner-addon img {
    position: absolute;
    right: 0px;
    padding: 10px 12px;
    pointer-events: none;
}

I'm trying to embed 'search.svg' image into textbox in AngularJS as shown in the image below

But I didn't get expected result. It's rendering like shown in the image below

I have tried - My html file

<div class="right-inner-addon pull-left col-lg-4">
    <input type="text" class="form-control input-append" />
    <img role="img" src="img/icons/search.svg" />
</div>

My CSS file

.right-inner-addon {
    position: relative;
}
.right-inner-addon input {
    padding-right: 30px;
}
.right-inner-addon img {
    position: absolute;
    right: 0px;
    padding: 10px 12px;
    pointer-events: none;
}

• javascript
• html
• css
• angularjs
• twitter-bootstrap

2 Answers 2

Make sure you are setting a top: 0; (or any value that fits your needs) on your .right-inner-addon img.

Here is a quick example.

Sample from my project

.dispensary-search {float: right; position: relative;}
.dispensary-search input { width: 300px; height: 32px; margin: 5px;}
.dispensary-search:before {content: ""; position: absolute; right: 10px; top: 0; bottom: 0; width: 20px; background: url(../images/search.svg) no-repeat right center;}