How to embed SVG image icon in input tag?
12,311
Solution 1
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.
Solution 2
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;}
Author by
user2067120
Updated on June 05, 2022Comments
-
user2067120 almost 2 years
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; }