如何删除包围单选按钮的div标签？

Question

I am facing difficulties for styling my form. This is the HTML code snippet of the web page.

<li class="gchoice_8_8_0">
    <div class="tetapose_radio">
        <input id="choice_8_8_0" type="radio" onclick="gf_apply_rules(8,[0,33,38,39,9,10,89,91,35,34]);" tabindex="16" value="0|0" name="input_8">
        <label for="choice_8_8_0"></label>
    </div>
    
    <label id="label_8_8_0" for="choice_8_8_0">
    <span class="column">
        Code
    </span>
    </label>
</li>

Now, what I want to do is style the span in the label which is out of the div tag wrapped around radio input

I tried this code with no luck

li .tetapose_radio input[type="radio"]:checked ~ li label .column { 
    box-shadow: 0px 4px 10px #1f8bcf !important;
    border-bottom: 1px solid #fff;
    z-index: 999;
}

We can use

:checked + label 

But it works only on label that immediately follows the input tag.

This is the code from WordPress site and div tag is wrapped by the theme itself, I don't know how to remove that tag. If anyone knows how to remove div tag wrapped around radio button using function then that would be awesome.

Otherwise CSS trick would do fine.

</div>

Answer 1

I guess you can use a preg_match with this regex which return the content of the div,

#<div.*(?<=class=)"tetapose_radio".*>(.*)<\/div>#sU

and then replace the div with the input inside with the content returned by the preg_match (to find the div you can use the same regex).

Normally it will do the trick :)