How can I make when I select the option that has value 1(Mastercard) the image with id Master change the opacity to 1? And put it in a function that works for both 4 values, each on with his own id? The default image I want it to be 0.3 and when selected one of the option the image has the opacity 1.
.itemForm2 {
width: 100%;
position: relative;
margin-bottom: 18px;
margin-top: 10px;
display: flex;
flex-direction: row;
}
.escolhaCartao {
display: flex;
flex-direction: row;
width: 218px!important;
gap: 10px;
}
@media(min-width:768px) {
.escolhaCartao {
width: 258px!important;
height: 34.32px;
gap: 5px;
}
.lineFormCartao {
display: flex;
flex-direction: row;
justify-content: inherit;
gap: 16px;
}
.escolhaCartao img {
opacity: .3;
}
}
<div class="lineForm lineFormCartao">
<div class="itemForm">
<select id="OpcoesCartao" name="OpcoesCartao">
<option value="1">Mastercard</option>
<option value="2">Visa</option>
<option value="3">Elo</option>
<option value="4">Amex</option>
</select>
</div>
<div class="itemForm2 escolhaCartao">
<img id="master" src="images/master.png" alt="Logo cartão Mastercard">
<img id="visa" src="images/visa.png" alt="Logo cartão Visa">
<img id="elo" src="images/elo.png" alt="Logo cartão Elo">
<img id="amex" src="images/amex.png" alt="Logo cartão Amex">
</div>
</div>
2
Answers
You can do it like this. This works in most browsers. Firefox should support it soon (https://caniuse.com/?search=has)
Using just CSS with has
with JavaScript