Change border color of bootstrap select (btn class)

Question

I'm using this library: https://developer.snapappointments.com/bootstrap-select/ but I can't change its behavior when selected. For example

<select class="selectpicker">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Barbecue</option>
</select>

where selectpicker is the key that creates this structure:

<button type="button" class="btn dropdown-toggle btn-new" data-toggle="dropdown" role="button" data-id="blabla" title="Mustard" aria-expanded="true">
<div class="filter-option"><div class="filter-option-inner"><div class="filter-option-inner-inner">Mustard</div></div> 
</div>
</button>

So, mainly, the library creates a button over the select (that exists but hidden). What I want is that when i select one of the items on list the border color (of the button and not the select) change color in #BF69B2 I have tried in this way:

document.getElementsByClassName("btn dropdown-toggle btn-default")[0].style.borderColor = "#BF69B2";

but with no success. Any idea?

Answer 1

You are trying to retrieve element with classess btn dropdown-toggle btn-default , but in template you have another classess: btn dropdown-toggle btn-new .

Just change

document.getElementsByClassName("btn dropdown-toggle btn-default")[0].style.borderColor = "#BF69B2";

to

document.getElementsByClassName("btn dropdown-toggle btn-new")[0].style.borderColor = "#BF69B2";