CSS is not being applied to newly appended elements

Question

I have got this html code

<input type="text" placeholder="Type country name" class="Cinp">

and this jquery/javascript code

$(".Cinp").keyup(function(e){
       var value=$(this).val();
        if (e.which >= 65 && e.which <= 90 || e.which==8)
         {
             if (value.length!=0) {
                function filter(letter) {
                  var len = country_list.length;
                 var i = 0;
                 while(i < len) {
                     if (country_list[i].indexOf(letter) === 0 || country_list[i].indexOf(letter.toUpperCase()) == 0 ){
                        results.push(country_list[i]);
                        $(".contres").append("<input class='col1box' type=\"checkbox\" id='Countr_box"+i+"'><label for='Countr_box"+i+"'></label> <label class='Countr_label' for='Countr_box"+i+"'>"+country_list[i]+"</label><br />");
                     }
                    i++;
                 }
                  return results.join("<li>");
                }

And css

.col1box + label{
cursor: pointer;
    margin-left:50px;
    margin-top:20px;
    background: #d3d2d2;
    height: 22px;
    width: 22px;
    display:inline-block;
    padding: 0 0 0 0px;
    border-radius: 5px;
}
.col1box:checked + label{
    background:#d3d2d2;
    background-image: url("../img/tick.png");
    height: 22px;
    background-size: 124px;
    background-repeat: round;
    width: 22px;
    background-position: 24px 21px;
    display:inline-block;
    padding: 0 0 0 0px;
}

But it is not working on appended element even thought it works in non-appended ones that i have got in my html code