javascript - How to embed SVG image icon in input tag? - Stack Overflow

admin管理员组

文章数量:1311044

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

Share Improve this question Follow edited May 7, 2014 at 13:33 Ex-iT 1,47722 gold badges1212 silver badges2020 bronze badges asked May 7, 2014 at 13:19 user2067120user2067120 26733 gold badges66 silver badges1818 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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

本文标签： javascriptHow to embed SVG image icon in input tagStack Overflow