Is there any way to make this checkbox html structure as slide with pure css?

this is my first question in stackoverflow ;)

I'm using a wordpress plugin called "WooCommerce TM Extra Product Options". When I create options for any woocommerce product with checkboxes, the html that the plugin generates is exactly like the below (and the checkbox have the default appearance):

    <label for="tmcp_choice_0_0_1_1519167210">
    <input class="tmcp-field ingredientepizza tmhexcolor_0_0_1_1519167210 tm-epo-field tmcp-checkbox" name="tmcp_checkbox_0_0_1519167210" data-limit="" data-exactlimit="" data-minimumlimit="" data-image="" data-imagec="" data-imagep="" data-imagel="" data-image-variations="[]" data-price="" data-rules="[&quot;&quot;]" data-original-rules="[&quot;&quot;]" data-rulestype="[&quot;&quot;]" value=" molho de tomate_0" id="tmcp_choice_0_0_1_1519167210" tabindex="1" type="checkbox" checked="checked">
        <span for="tmcp_choice_0_0_1_1519167210"></span><span class="tc-label tm-label"> molho de tomate</span></label>

Is there any way to make a change in the following codepen CSS code (https://codepen.io/macbobbitt_/pen/BjepPG) to work with the above specific html structure (since I can't change it).

Thanks in advance for any help.