DEMO：

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元素，因为这也可以。

DEMO：

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

＆＃13;

$('[name=username]').keyup(function(){

    if($('form').valid()){
         $(this).parent().removeClass().addClass('isvalid');
     }else{
             $(this).parent().removeClass().addClass('notvalid');
        
     }

})

＆＃13;

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;
}

＆＃13;

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

＆＃13;

使用伪元素

1 个答案:

DEMO：