どのように私はこのメニューの下のフォームが完了したかを示します

Question

私はちょうどその下にいくつかのフォームを保持するメニューのこのコードを書いたが、ユーザーがメニューのフォームに成功したことを示したいという点がありますメニューの下にフォームの記入を完了したことをユーザーに知らせるマークアイコンのようなものを表示したいと考えています。

下の画像を参照してください：以下

は私のHTMLとCSSコードです：

おかげ

HTML：

<div class="container"> 
<div class="row"> 


    <div id="completedStep" class="col-md-3 signUpStep"> 
      <div class="stepNumb">1</div> 
      <div class="stepInfo">Basic Info</div> 
    </div> 


    <div id="activeStep" class="col-md-3 signUpStep"> 
      <div class="stepNumb">2</div> 
      <div class="stepInfo">Address</div> 
    </div> 



    <div class="col-md-3 signUpStep"> 
      <div class="stepNumb">3</div> 
      <div class="stepInfo">Tutoring</div> 
    </div> 

    <div class="col-md-3 signUpStep"> 
      <div class="stepNumb">4</div> 
      <div class="stepInfo">Schedule</div> 
    </div> 



</div> 
</div> 

CSS

#activeStep{ 
background: #007ee5; 
color: #fff; 
} 

#completedStep{ 
color: #888; 
} 

.signUpStep { 
position: relative; 
float: left; 
background-color: #fafafa; 
height: 42px; 
width: 100%; 
margin: 0; 
overflow: hidden; 
color: #007ee5; 
} 

.stepNumb { 
float: left; 
font-size: 34px; 
line-height: 1em; 
font-weight: 300; 
} 

.stepInfo { 
margin-left: 28px; 
line-height: 16px; 
font-size: 16px; 
padding-top: 5px; 
} 

また、コードが一般的にbroswerの基準を満たしているかどうかを確認するのに役立つ場合は、私はそれを感謝します。

あなたからの読書を待っています。

Answer 1

これを行う方法の1つは、カスタムコンテンツイメージを指定したdivに追加することです。

.isValid{ 
    background: url("https://cdn2.iconfinder.com/data/icons/glossy_ecommerce_icons/ok.png") no-repeat scroll; 
    float: right; 
    width: 5%; 
    height: 100%; 
} 

し、HTMLのようなものでなければなりません：その内容が有効であるとき、単にDIVに "のisValid" クラスを追加

<div id="completedStep" class="col-md-3 signUpStep"> 
     <div class="isValid"></div> 
     <div class="stepNumb">1</div> 
     <div class="stepInfo">Basic Info</div> 
</div> 

。

例：http://www.bootply.com/6UEbNL2uBQ

表示する\皮の使用はJQuery：

$('#divSelector').addClass('isValid'); 
$('#divSelector').removeClass('isValid'); 

EDIT：ちょうどより簡単になったあなたはあなたの人生をブートストラップ使用している場合 、ブートストラップのフォームコントロールについて読むことを確認してください妥当性確認：

http://getbootstrap.com/css/#forms-control-validation