html - 使用伪元素在有效输入字段上显示 ✓ 标记

Question

下面是我创建的使用 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

Answer 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>