Hello! I need to make an emoticon on top of Input'a, it is in png format. How can this be realized? Grateful for any help!

enter image description here

  • Why in the png ? Why not svg ? - MihailPw
  • It is also possible in SVG, the essence of the question is not in this c: - user234223
  • Apparently, this is not just a picture, this is a button that will trigger some kind of action. - Sasha Omelchenko
  • @SashaOmelchenko Yes, that's right. - user234223

1 answer 1

Using absolute positioning:

 input { border: 1px black solid; height: 31px; padding: 4px 40px 4px 4px; } img { position: absolute; margin: 4px 0 0 -37px; } 
 <input> <img src='https://www.gravatar.com/avatar/4284dcaa7857f5035883f7f50b1f48cd?s=32&d=identicon&r=PG'>

  • You may still need a wrapper with position: relative; - dmitryshishkin
  • @shugich and maybe not) - lampa