Modifying CSS so it's not dependent on Label or Span tags to style Input elements

I would like to style existing checkboxes and radio buttons using the code shown here. It's a pure CSS method that achieves the exact look I needed, and adjusts the size of the input elements according to the label font size.

I need to style the input elements regardless of whether or not they have a <label> element and/or <span> tag, or if they are structured somewhat differently, but my CSS is a bit rusty and I'm having trouble modifying the code so it will work.

HTML

<div class="input_style">
    <input type="checkbox" name="field" value="option1">
    <label><span></span>Value</label>

    <input type="radio" name="field1" value="option">
    <label><span><span></span></span>Value</label>
</div>

CSS

.input_style input[type = checkbox]: not(old),.input_style input[type = radio]: not(old) {
    width: 2e m;
    margin: 0;
    padding: 0;
    font - size: 1e m;
    opacity: 0;
}
.input_style input[type = checkbox]: not(old), .input_style input[type = radio]: not(old) {
    width: 2e m;
    margin: 0;
    padding: 0;
    font - size: 1e m;
    opacity: 0;
}
.input_style input[type = checkbox]: not(old) + label, .input_style input[type = radio]: not(old) + label {
    display: inline - block;
    margin - left: -2e m;
    line - height: 1.5e m;
}
.input_style input[type = checkbox]: not(old) + label > span, .input_style input[type = radio]: not(old) + label > span {
    display: inline - block;
    width: 0.875e m;
    height: 0.875e m;
    margin: 0.25e m 0.5e m 0.25e m 0.25e m;
    border: 0.0625e m solid# C0C0C0;
    border - radius: 0.25e m;
    background: #E0E0E0;
    background - image: -moz - linear - gradient(#F0F0F0, #E0E0E0);
    background - image: -ms - linear - gradient(#F0F0F0, #E0E0E0);
    background - image: -o - linear - gradient(#F0F0F0, #E0E0E0);
    background - image: -webkit - linear - gradient(#F0F0F0, #E0E0E0);
    background - image: linear - gradient(#F0F0F0, #E0E0E0);
    vertical - align: bottom;
}
.input_style input[type = checkbox]: not(old): checked + label > span, .input_style input[type = radio]: not(old): checked + label > span {
    background - image: -moz - linear - gradient(#E0E0E0, #F0F0F0);
    background - image: -ms - linear - gradient(#E0E0E0, #F0F0F0);
    background - image: -o - linear - gradient(#E0E0E0, #F0F0F0);
    background - image: -webkit - linear - gradient(#E0E0E0, #F0F0F0);
    background - image: linear - gradient(#E0E0E0, #F0F0F0);
}
.input_style input[type = checkbox]: not(old): checked + label > span: before {
    content: '✓';
    display: block;
    width: 1e m;
    color: black;
    font - size: 0.875e m;
    line - height: 1e m;
    text - align: center;
    text - shadow: 0 0 0.0714e m #4c4c4c;
      font-weight : bold;
    }
.input_style input[type= radio]: not(old): checked + label > span > span {
    display: block;
    width: 0.43e m;
    height: 0.45e m;
    margin: 0.125e m;
    border: 0.0625e m solid #4c4c4c;
      border-radius    : 0.125em;
      background       : black;
      background-image :    -moz-linear-gradient(# 4 c4c4c, black);
      background - image: -ms - linear - gradient(#4c4c4c,black);
      background-image :      -o-linear-gradient(# 4 c4c4c, black);
      background - image: -webkit - linear - gradient(#4c4c4c,black);
      background-image :         linear-gradient(# 4 c4c4c, black);
}