0

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...

Lukas Lang
  • 21
  • 6

2 Answers2

2

To do this with just CSS, the easiest way would be to reorganize your HTML:

<input type="radio" id="edd-gateway-manual" ... />
<label for="edd-gateway-manual" ... >Test-Zahlung</label>

This way you can target them using CSS selectors:

[type="radio"]:checked + label {
   ...
}

Since you state that you cannot change the HTML code, the next easiest solution would be to use JavaScript to toggle a class on the label (Note: this example uses jQuery):

$('[type="radio"]').click(function() {
    $(this).parents('label').toggleClass('checked');
});

label.checked {
    ...
}

However, if you really want to figure out a way to get this to work, you might be able to use the :before or :after pseudo-class on the checked element instead of using the parent label (since parents cannot be targeted in CSS selectors). Something like this:

[type="radio"]:before {
  content: '';
  ...
}

[type="radio"]:checked:before {
  content: '';
  ...
}
jeffjenx
  • 17,041
  • 6
  • 57
  • 99
  • 1
    Note - *I must not change the HTML-Code*, so this is not an option for the OP. – Paulie_D Mar 08 '16 at 16:43
  • @Paulie_D Thanks for pointing that out. I overlooked that statement. Will edit accordingly. – jeffjenx Mar 08 '16 at 16:44
  • Thanks for your response. I inserted that Snippet to the JavaScript field, but it still doesn't work as you can see her: https://jsfiddle.net/01k77o5z/2/ However maybe I did something wrong... :/ – Lukas Lang Mar 08 '16 at 16:58
  • @LukasLang my apologies for omitting the fact that the code that I had provided was using a library called jQuery, though it certainly can be written in pure/plain JavaScript. I updated your fiddle to include jQuery and it works: https://jsfiddle.net/01k77o5z/3/ – jeffjenx Mar 08 '16 at 16:59
1

CSS only solution:

This is done by the pseudo element :checked. See the support for this element if you really need to go backwards.

input[type=radio]:checked + label {
  /* Add your style here */
}
Roy
  • 7,811
  • 4
  • 24
  • 47