I'm a amateur in coding, but I want to style radio-buttons via CSS. I already managed to disable the input-fields and to add a bg-image to the labels.
However I don't know how I can target the checked labels... I want them to have an opacity of 1, if they are checked.
<label for="edd-gateway-manual"
class="edd-gateway-option edd-gateway-option-selected"
id="edd-gateway-option-manual">
<input type="radio"
name="payment-mode"
class="edd-gateway"
id="edd-gateway-manual"
value="manual">Test-Zahlung</label>
<label for="edd-gateway-paypal"
class="edd-gateway-option"
id="edd-gateway-option-paypal">
<input type="radio"
name="payment-mode"
class="edd-gateway"
id="edd-gateway-paypal"
value="paypal">PayPal</label>
And Here is my CSS:
input.edd-gateway {
display: none !important;
}
label.edd-gateway-option {
cursor: pointer !important;
opacity: 0.1;
}
label.edd-gateway-option:hover {
opacity: 1; !important;
}
label#edd-gateway-option-manual.edd-gateway-option {
color: transparent !important;
display: inline-block;
width: 150px;
height: 100px;
background-image: url("http://i.imgur.com/lXzJ1eB.png");
background-position: center center;
background-size: cover;
background-repeat:no-repeat;
margin: 0 10px 20px 0 !important;
}
label#edd-gateway-option-paypal.edd-gateway-option {
color: transparent !important;
display: inline-block;
width: 150px;
height: 100px;
background-image: url("http://i.imgur.com/lXzJ1eB.png");
background-position: center center;
background-size: cover;
background-repeat:no-repeat;
margin: 0 10px 20px 0 !important;
}
Here is my Code: https://jsfiddle.net/01k77o5z/
Could you help me? That would be great!
P.S. I must not change the HTML-Code, because of updates...