styling selct

HTML

<div class="selectDiv">
        <span class="selectDefault"></span>
        <select name="txtCountry" class="selectBox">
					<option class="defualt-text">-- Select Country --</option>
					<option value="1">Abkhazia</option>
					<option value="2">Afghanistan</option>
		</select>
</div>

CSS

.selectDiv {
   
   width: 170px;
   height: 28px;
    line-height:28px;
   background: url('http://s24.postimg.org/lyhytocf5/dropdown.png') no-repeat right #FEFEFE;
   border: #ccc 1px solid;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0px 0px 10px 1px #FEFEFE;
box-shadow: inset 0px 0px 10px 1px #FEFEFE;
    margin:0px;
    padding:0px;
    position: relative;
    z-index:100;
    
   }
.selectDefault {
    padding-left:8px;
}

.selectDiv select {

   margin:0px;
   padding:0px;
    opacity:0;
    filter:alpha(opacity=0);
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:block;
    z-index:101;
}
   .selectDiv select:focus {
    outline: none;
}

.selectDefault, .selectDiv option {
    font-family:arial;
    font-size:12px;
    }

JavaScript

var defaulttext = $('.defualt-text').text();

$('.selectDefault').text(defaulttext);

$('.selectBox').on('change',function(){
   var defaulttext2 = $('.selectBox').find(":selected").text(); 
    $('.selectDefault').text(defaulttext2);
});