Question

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

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

谢谢！

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

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

Answer 2

我基于背景图像编码提出的解决方案，但是在输入CSS容器中（如果有意义……对此仍然是新的）：

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

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

2 个答案: