how to change the border-color on value select using jquery.
<div class="col-md-4 col-sm-12 col-xs-12">
<div class="form-group">
<span class="input input--ichiro" style="float: left">
<%= startup.collection_select :stage_id, Stage.where('id <> 1'), :id, :name, {}, {class: "form-control input__field input__field--ichiro", id: "stage_id" } %>
<label class="input__label input__label--ichiro" for="stage_id">
<span class="input__label-content input__label-content--ichiro">What stage is your startup in? *</span>
</label>
</span>
</div>
</div>
.css file
.input__label.input__label--ichiro::before{ border-bottom: 2px solid #e74c3c !important; }
jquery
$(".collection_select .input__label.input__label--ichiro ").on('blur',function(){
if ( $('option:selected', this).val() == 0 ){
$(this).css('border-color', '#C80000');
}
else if ($(this).val() > 0) {
$(this).css('border-color', '#BDC7BC');
}
});
this jquery is not working. can anybody help me out?
Aucun commentaire:
Enregistrer un commentaire