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

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 class。

$('[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>

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

Displaying ✓ mark on valid input fields using pseudo-elements

html

css

validation

input

pseudo-element

演示：