如何使用偽元素將圖像放置在文本框旁邊？

Question

我試圖在每個有效的文本框（客戶端驗證）旁邊放置一個“刻度”圖像。 為此，我使用了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類會動態添加到輸入元素。 但不發射圖像。

射線

Answer 1

僅使用CSS可能會有一些問題，因為:after元素是used元素的一部分，但是輸入不能包含任何子元素。

您必須執行以下操作：

<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