CODEWITHSUNDEEP
javascripthtmlcss
Милош Марковић
Милош Марковић

Reputation: 55

How to change background-image on <select> element

The problem is, I can put fixed background image, but I want it to be changed when I change currency

code:

<select id="from" class="recalculate flag-show" style='background-image: url(<?= url("assets/img/volopa/flags/gbp.png") ?>); background-repeat: no-repeat!important; background-position:left!important;'>
                    <option value="gbp" selected="">GBP - Pound Sterling</option>
                    <option value="eur">EUR - EURO</option>
                    <option value="usd">USD - US Dollar</option>
                    <option value="aud">AUD - Australian Dollar</option>
                    <option value="cad">CAD - Canadian Dollar</option>
                    <option value="chf">CHF - Swiss Franc</option>
                    <option value="dkk">DKK - Danish Krone</option>
                    <option value="hkd">HKD - Hong Kong Dollar</option>
                    <option value="jpy">JPY - Japanese Yen</option>
                    <option value="nok">NOK - Norwegian Krone</option>
                    <option value="nzd">NZD - New Zealand Dollar</option>
                    <option value="pln">PLN - Polish Zloty</option>
                    <option value="sek">SEK - Swedish Krona</option>
                    <option value="zar">ZAR - South African Rand</option>
                </select>

Calculator location

I tried with css: select#form option[value="usd"]{....}

but no changes.

Thank you in advance

Upvotes: 3

Views: 879

Answers (1)

prettyInPink
prettyInPink

Reputation: 3444

I am not sure this is possible with css alone. You could add a simple snippet of Javascript. In this case I would probably use data-attributes.

I set up an example with data-flag and targeting it this way in your css.

const from = document.querySelector('#from');

from.addEventListener('change', function() {
    this.dataset.flag = this.value;
});
#from[data-flag="gbp"]{
  background: red;
}

#from[data-flag="eur"]{
  background: blue;
}
<select id="from" class="recalculate flag-show" data-flag="gbp">
      <option value="gbp" selected="">GBP - Pound Sterling</option>
      <option value="eur">EUR - EURO</option>
  </select>

Upvotes: 2

Related Questions