我不明白这段代码中的问题。在此代码中,当我添加隐藏类型标记时,复选框不会显示其他方面的工作正常...
CSS代码
.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代码:
<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>
答案 0 :(得分:2)
input type=hidden
可能位于复选框和标签之间,而且样式宽度不适用此类选择器复选框+标签。