How to properly implement a form input-based image using CSS

i have a trick in implementing a form input-based image which can be of help in your coding careeer, and also help you when doing your own projects.Below is a demo of the above problem.

<input type="text" name="text" value="" class="input">

.input{
background-image: url('https://dummyimage.com/20X20/ffffff/0a0a0a&text=x');
background-repeat: no-repeat;
background-position: right;
}