Question

我制作了一组单选按钮和复选框，看起来像常规按钮，选择状态可以在选中时更改背景颜色和字体颜色。除非您在未选择答案的情况下提交表单，否则它可以正常工一旦应用了错误，浏览器就不会再看到第一个选项（或复选框的所有选项）（输入：checked + span未应用）。有一个更好的方法吗？提前致谢！

HTML：

<div class="surveyQuestion">
    <label>@Html.RadioButton("opinionBrand", "Excellent")<span>Excellent</span></label>
    <label>@Html.RadioButton("opinionBrand", "Good")<span>Good</span></label>
    <label>@Html.RadioButton("opinionBrand", "Fair")<span>Fair</span></label>
    <label>@Html.RadioButton("opinionBrand", "Poor")<span>Poor</span></label>
    <label>@Html.RadioButton("opinionBrand", "Very Poor")<span>Very Poor</span></label>
</div>

的CSS：

.surveyQuestion label {
    float:left;
    width:289px;
    margin: 0 9px 9px 0;
    background-color:#FFF;
    border:2px solid #000;
    overflow:hidden; 
}

.surveyQuestion label input {
    position:absolute;
    z-index: -1;
}

.surveyQuestion input:checked + span {
    background-color:#666;
    color: #fff;
}

脚本（错误放置）：

errorPlacement: function (error, element) {
    error.insertAfter(element);
}

html（错误之后）：

<label>
    <input id="opinionBrand" type="radio" value="Excellent" class="error">
    <label for="opinionBrand" class="error"></label>
    <span>Excellent</span>
</label>

Answer 1

input:checked + span表示跨度应该在input:checked（+ - 符号）后面。使用

.surveyQuestion input:checked + span,
.surveyQuestion input:checked + label.error + span {
    background-color:#666;
    color: #fff;
}

匹配有和没有错误标签。

演示：http://jsbin.com/yigikunu/1/edit?html,css,output

输入：检查错误后无法识别

1 个答案: