jeudi 10 janvier 2019

change border-color on select value in dropdown

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