embed SVG image icon in input tag - HTML CSS SVG

HTML CSS examples for SVG:Image

  1. HOME
  2. HTML CSS
  3. SVG
  4. Image

Description

embed SVG image icon in input tag

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

.right-inner-addon {
   position: relative;
   width: 200px;
}
.right-inner-addon input {
   padding-right: 30px;
   width: 170px; /* 200px - 30px */
}
.right-inner-addon img {
   position: absolute;
   right: -10px;
   padding: 10px 12px;
   pointer-events: none;<!--from   w w  w .jav a 2s  .  c o  m-->
   top: -8px;
}


      </style> 
 </head> 
 <body> 
  <div class="right-inner-addon pull-left col-lg-4"> 
   <input type="text" class="form-control input-append"> 
   <img role="img" src="https://www.java2s.com/style/demo/Firefox.png"> 
  </div>  
 </body>
</html>

Related Tutorials