我想在一些单选按钮周围获得鲜艳的红色边框,但在最新版本的Firefox或Chrome中没有显示。 在IE9 / IE8中运行良好。
我的表单中每个必填的输入元素都有一个由MVC3放置的data-val-required属性。 当我们有文本或文本区域输入时,所有浏览器都可以轻松地放置红色边框,但是对于单选按钮,我遇到了困难。 对于IE,它可以工作,但是其他浏览器不会在其周围放置红色边框。
css:
input[data-val-required], select[data-val-required], textarea[data-val-required]
{
background-color: #F0FFFF;
border: 1px solid red;
}
查看源代码:
<label for="WaiveSelect">Do you waive confidentiality?</label><br />
<input data-val="true" data-val-number="The field WaiveSelect must be a number." data-val-required="Please select waive." id="WaiveSelect" name="WaiveSelect" type="radio" value="0" /> No, I do not waive confidentiality<br />
<input id="WaiveSelect_2" name="WaiveSelect" type="radio" value="2" /> Yes, I waive confidentiality<br />
<input id="WaiveSelect_3" name="WaiveSelect" type="radio" value="3" /> Yes, I waive confidentiality except to the client<br />
<span class="field-validation-valid" data-valmsg-for="WaiveSelect" data-valmsg-replace="true"></span>
在IE中的显示效果(Firefox和Chrome没有边框):