How to remove div tag wrapped around radio button?

1 Views

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

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

Post Views: 1

Related posts

Leave a Reply

2 comments

  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 🙂

  2. Ok I found a way around.

    It was a problem of gravity forms custom fields.
    I replaced the custom fields to normal fields and now

    label is inside the div tag.

    So, now I can style It 😀

    Thanks for your responses…