I have created a javascript that checks the user’s input and gives an error if the input is invalid, but now I am trying to style the form fields giving it a better look, for instance, when a user types a wrong input the field highlights in yellow and once corrected it goes back to white.
My problem at the moment is that I wanted to add 2 different images when the field is completed correctly the image is a positive check mark and when the input is incorrect the image is a negative check mark and is updated once the field is corrected or changed.
I did manage to do it, as a field background on CSS but then the text runs behind it, is there a way to put this image as a border, but only on the right of the field, the image is 18px width and height I tried doing border-right-image but the image does not come up, and also I read that this will also not work in the old browsers, does anyone have a solution for this?
this is an example of what I want to achieve