html - CSS - 如何正确实现基于表单输入的图像

Question

我想知道如何正确使用 CSS 以根据有效的表单反馈显示图像？

本质上，我想分别根据有效/无效数据在每个表单输入行上显示自定义绿色复选标记图像或红色 X 图像。有没有办法让这个图像出现在输入框中，右对齐？

谢谢！

更新：添加图像就像将其包含在我的 CSS 页面的“输入：无效”区域中一样简单。现在我只需要知道如何让它只出现一次，最好是右对齐。

标签： htmlcss

Answer 1

请检查这个我认为 [this][1] 是你需要的：

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