gpt4 book ai didi

javascript - 如何使用伪元素将图像放在文本框旁边?

转载 作者:太空宇宙 更新时间:2023-11-03 23:30:52 24 4
gpt4 key购买 nike

接下来我试图在每个有效的文本框(客户端验证)旁边放置一个“勾号”图像。为此,我使用了 psuado 元素。

CSS

.valid {
border: 2px solid #a9cc56;
}

.valid:after {
content: "";
background: url('~/Areas/Waybill/Content/Images/icn-validation-valid.png') no-repeat;
width: 20px;
height: 20px;
float: left;
margin: 0 6px 0 0;
display: block;
}

.valid 类在输入有效时动态添加到输入元素中。但不发射图像。

最佳答案

仅使用 CSS 可能会有点问题,因为 :after 元素是已用元素的一部分,但输入不能有任何子元素。

你必须做类似的事情:

<input /><span></span>

CSS:

.valid + span:after {
content: "";
background: url('~/Areas/Waybill/Content/Images/icn-validation-valid.png') no-repeat;
width: 20px;
height: 20px;
float: left;
margin: 0 6px 0 0;
display: block;
}

编辑:

有用的答案:https://stackoverflow.com/a/4660434/2746472

关于javascript - 如何使用伪元素将图像放在文本框旁边?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25401347/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com