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

Question

I am wondering how to properly use CSS in order to display an image based on valid form feedback?

Essentially I want to display a custom green check mark image or red X image on each form input line based on valid/invalid data, respectively. Is there a way to have this image appear inside the input box, right-aligned?

Thank you!

Update: Adding the image was as simple as including it within the "input:invalid" area of my css page. Now I just need to know how to have it only appear once and preferably right-aligned.

I think you could use div tag as the wrapper, and position:absolute. — Talent Developer
– Talent Developer, Commented Sep 17, 2018 at 0:45
It's a school assignment and we are supposed to do it without div. No boostrap or anything fancy, very simple html form with some css — Andrew
– Andrew, Commented Sep 17, 2018 at 0:58
Please provide a minimal reproducible example with what you have tried. — tao
– tao, Commented Sep 17, 2018 at 1:36

shakogele · Accepted Answer · 2018-09-17 01:36:53Z

1

Please check this I think [this][1] is what you need:

<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;
}

answered Sep 17, 2018 at 1:36

shakogele

3994 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Andrew Over a year ago

Awesome, this is exactly what I came up with lol. You posted this as I was preparing my comment.

shakogele Over a year ago

yah thats simple :)

Andrew · Accepted Answer · 2018-09-17 01:39:07Z

0

The solution I came up with based on background image coding but within an input CSS container (if that makes sense... still new to this):

input:valid {
    background-color: #5CEC87;
    background-image: url(green_checkmark.png);
    background-repeat: no-repeat;
    background-position: right;
}


input:invalid {
    background-color: #FD9191;
    background-image: url(red_asterisk.png);
    background-repeat: no-repeat;
    background-position: right;
}

answered Sep 17, 2018 at 1:39

Andrew

76 bronze badges

1 Comment

Andrew Over a year ago

@AndreiGheorghiu Nothing! Just wanted to share my solution just in case anyone else stumbled upon this post with the same question and/or for personal future reference.

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related