Checkboxen zeigen keinen Browser an

Question

Ich verstehe nicht, was das Problem in diesem Code ist. In diesem Code, wenn ich versteckte Typ-Tag hinzufügen, dann Checkbox nicht zeigen andere weise seine Arbeit gut ...

CSS-Code

.example{ 
    margin-bottom : 1.5em; 
} 

input[type=checkbox]:not(old), 
input[type=radio ]:not(old){ 
    width  : 2em; 
    margin : 0; 
    padding : 0; 
    font-size : 1em; 
    opacity : 0; 
} 

input[type=checkbox]:not(old) + label, 
input[type=radio ]:not(old) + label{ 
    display  : inline-block; 
    margin-left : -2em; 
    line-height : 1.5em; 
} 

input[type=checkbox]:not(old) + label > span, 
input[type=radio ]:not(old) + label > span{ 
    display   : inline-block; 
    width   : 0.875em; 
    height   : 0.875em; 
    margin   : 0.25em 0.5em 0.25em 0.25em; 
    border   : 0.0625em solid rgb(192,192,192); 
    border-radius : 0.25em; 
    background  : rgb(224,224,224); 
    background-image : -moz-linear-gradient(rgb(240,240,240),rgb(224,224,224)); 
    background-image :  -ms-linear-gradient(rgb(240,240,240),rgb(224,224,224)); 
    background-image :  -o-linear-gradient(rgb(240,240,240),rgb(224,224,224)); 
    background-image : -webkit-linear-gradient(rgb(240,240,240),rgb(224,224,224)); 
    background-image :   linear-gradient(rgb(240,240,240),rgb(224,224,224)); 
    vertical-align : bottom; 
} 

input[type=checkbox]:not(old):checked + label > span, 
input[type=radio ]:not(old):checked + label > span{ 
    background-image : -moz-linear-gradient(rgb(224,224,224),rgb(240,240,240)); 
    background-image :  -ms-linear-gradient(rgb(224,224,224),rgb(240,240,240)); 
    background-image :  -o-linear-gradient(rgb(224,224,224),rgb(240,240,240)); 
    background-image : -webkit-linear-gradient(rgb(224,224,224),rgb(240,240,240)); 
    background-image :   linear-gradient(rgb(224,224,224),rgb(240,240,240)); 
} 

input[type=checkbox]:not(old):checked + label > span:before{ 
/* content  : '✓'; */ 
    content  : "\221A"; 
    display  : block; 
    width  : 1em; 
    color  : rgb(153,204,102); 
    font-size : 0.875em; 
    line-height : 1em; 
    text-align : center; 
    text-shadow : 0 0 0.0714em rgb(115,153,77); 
    font-weight : bold; 
} 

input[type=radio]:not(old):checked + label > span > span{ 
    display   : block; 
    width   : 0.5em; 
    height   : 0.5em; 
    margin   : 0.125em; 
    border   : 0.0625em solid rgb(115,153,77); 
    border-radius : 0.125em; 
    background  : rgb(153,204,102); 
    background-image : -moz-linear-gradient(rgb(179,217,140),rgb(153,204,102)); 
    background-image :  -ms-linear-gradient(rgb(179,217,140),rgb(153,204,102)); 
    background-image :  -o-linear-gradient(rgb(179,217,140),rgb(153,204,102)); 
    background-image : -webkit-linear-gradient(rgb(179,217,140),rgb(153,204,102)); 
    background-image :   linear-gradient(rgb(179,217,140),rgb(153,204,102)); 
} 

HTML-Code: Wahrscheinlich ist

<div class="panel-body"> 
    <table class="table"> 
    <s:iterator value="eligibilityList" status="status"> 
     <s:if test='%{lkpGroupId == "160100000005"}'> 
     <tr> 
      <td style="visibility: hidden;"><s:property value='lkpDataId' /> 
      </td> 
      <td><s:property value='lkpDataName' /> 
      </td> 
      <td> 
      <div class="example"> 
       <div> 
       <s:if test='%{chackBoxStatus == "1"}'> 
        <input id="<s:property value='lkpDataId' />" class="chackBoxIdPrefix" type="checkbox" name="checkbox" checked="checked"> 
        <input value="1" id="hid_<s:property value='lkpDataId' />" type="hidden" name="checkbox1" /> 
       </s:if> 
       <s:else> 
        <input id="<s:property value='lkpDataId' />" class="chackBoxIdPrefix" type="checkbox" name="checkbox"> 
        <input value="0" id="hid_<s:property value='lkpDataId' />" type="hidden" name="checkbox1" /> 
       </s:else> 
       <label for="checkbox2"><span></span>bind For Prefix</label> 
       </div> 
      </div> 
      </td> 
     </tr> 

     </s:if> 
    </s:iterator> 

    <tr> 
     <td colspan="3" align="center"> 
     <input type="button" value="Save Change" class="btn-info" align="middle"> 
     </td> 
    </tr> 
    </table> 
</div> 

Answer 1

die input type=hidden zwischen dem Kontrollkästchen und Label und die Stile Breite diese Art von Selektoren Checkbox + Label werden nicht angewendet.