【问题标题】：Displaying ✓ mark on valid input fields using pseudo-elements [duplicate]使用伪元素在有效输入字段上显示 ✓ 标记[重复]
【发布时间】：2016-12-05 11:32:29
【问题描述】：

下面是我创建的尝试，使用 CSS content 属性添加勾选标记以显示在有效的必填字段上，但它没有成功。

因为我还没有真正看到它是这样做的，难道就不能这样做吗？只使用 JavaScript 会更有效吗？

我想听听人们对我应该如何实现此功能以获得用户反馈的意见。

input[type=text]:valid {
  border: 1px solid green;
}
input[type=text]:valid:after {
  content: '✓';
  color: green;
}

<p>Username:</p>
<input type="text" placeholder="Username" name="username" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{1,20}$" title="Must Include Characters And Numbers only" required>

这基本上回答了我的问题： http://codepen.io/brentrobbins/pen/beexQR

【问题讨论】：

查看演示 here 然后告诉我
@Xufox : 它没有重复.. 因为他想申请 :after for VALID 输入，而不是任何 INPUT。
有这样的选项不使用javascript codepen.io/brentrobbins/pen/beexQR 更可取
@MarkoMackic 这是我正在寻找的答案。谢谢
@AbdennourTOUMI 那里最大的不同是什么？另一个问题的答案表明伪元素对于 any 输入是不可能的，那么为什么将它应用于特定类别的输入会是一个完全不同的问题呢？甚至这里的一个答案也重申了这一点，并提供了一些替代方案和来自其他问题的任何答案都足以回答 this 问题。

标签： html css validation input pseudo-element

【解决方案1】：

input 不能有 ::before 或 ::after 元素。尝试在输入周围包裹<span> 并执行span:after

或者只是在之后使用img 元素，因为这也可以。

演示：

我还使用 jQuery#valid 来更改 span 的 CSS 类。

$('[name=username]').keyup(function(){

    if($('form').valid()){
         $(this).parent().removeClass().addClass('isvalid');
     }else{
             $(this).parent().removeClass().addClass('notvalid');
        
     }

})

span.isvalid:after
{
  content: '✓';
  color: green;
  }
 span.notvalid:after{
     content: '×';
     color: red;
   
 } 

.isvalid input[name=username]{
	border: 2px solid green;
}
.notvalid input[name=username]{
	border: 2px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>

<p>Username:</p>
<form>
<span class="notvalid"><input type="text" placeholder="Username" name="username" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{1,20}$" title="Must Include Characters And Numbers only" required></span>
  </form>

【讨论】：