0

I am trying to style my wordpress plugin and I'm having a hard time with the radio buttons.

Here is the fiddle: https://jsfiddle.net/cd3wagvh/

I want to hide the radio buttons and instead change the background of the whole label when it is clicked.

I have tried many things but nothing seems to work.

This part in particular is not working as intended: 

.pewc-checkbox-group-wrapper input[type=radio]:checked+label {
  background-color: red !important;
}

Edit: I cannot edit the HTML as it's part of a WordPress plugin and that's how they have it.

Edit: I have the part of the php code where I can potentially reverse the order? 

'<li><label for="%s"><input data-option-cost="%s" type="radio" name="%s[]" id="%s" class="pewc-radio-form-field" value="%s" %s>&nbsp;%s</label></li>',

My php is no good, any help would be great!

sci-guy
  • 1,843
  • 3
  • 16
  • 39

1 Answers1

0

Here's a working fiddle: https://jsfiddle.net/3smfLhk8/3/

First, you need spaces around the +. CSS uses spaces to differentiate elements.

Second, the CSS element + next-element only works for two elements that are placed one after the other, not nested elements like you have in your example. In fact, there is currently no way to get the parent element via CSS selectors.

Instead of nesting the elements, you could structure the HTML with the <input> preceding the <label>, like so:

<ul>
<li>
    <input type="radio" id="first-option" value="option-1">
    <label for="first-option">First option</label>
</li>
<li>
    <input type="radio" id="second-option" value="option-2">
    <label for="second-option">Second option</label>
</li>
</ul>

and use the first-element:checked ~ second-element selector.

li input[type="radio"] {
    display: none;
}

li label {
    display: inline-block;
    padding: 20px;
    border: 1px solid black;
    background-color: white;
}

li input[type=radio]:checked ~ label {
    background-color: red;
}
pranav
  • 76
  • 5
  • I should have added that restructuring the html is not an option as it's a plugin for wordpress that I am messing around with. – sci-guy Jun 03 '20 at 01:55
  • That's unfortunate. What I said about CSS selectors still applies, so your best bet is probably using the shadow DOM's `input:before` and `input:after` and creating clickable and style-able elements with those. – pranav Jun 03 '20 at 05:34