You cannot safely place an image in an input text field. The same works in some browsers and it works for you, but I don’t think it works always. What I would do is mount it in a current element, placing the input inside the element and putting the background in that element. All with CSS.
The HTML you would use would be like this:
The CSS then uses an image icon as the background. You have to use the icon that best suits you with the color you need in your interface. You place it and position it inside the element, on the left side, by padding the
Another detail is that the input removes the border. You put the border on the
The CSS could be more or less the following:
.input-icon { background-image: url(‘success.png’); background-repeat: no-repeat; background-position: 4px center; background-size: 20px; display: flex; align-items: center; width: 300px; padding-left: 28px; height: 30px; border: 1px solid rgba(9, 113, 163, 1); border-radius: 3px; } .input-icon input { width: 100%; font-size: 0.9em; border: none; } .input-icon input:focus { outline: none; }
You don’t need Javascript for this to work. But I think that one thing that could be useful for you is that, when you click on the
document.querySelector(‘.input-icon’).addEventListener(‘click’, function() { this.querySelector(‘input’).focus(); });
The most interesting thing would be for you to make a component with this user interface, since that way you could reuse it as many times as you need. You can make a custom element of web components, a jquery plugin or whatever suits you.
Facebook Comments
Disqus