擬似要素を使用して有効な入力フィールドに✓マークを表示

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：

私はそのspanのCSSクラスを変更することもjQuery#validを使用。

$('[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]{ 
 
\t border: 2px solid green; 
 
} 
 
.notvalid input[name=username]{ 
 
\t 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>