我试图在一些单选按钮周围添加一个花哨的红色边框,但在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;
}
view-source:
<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没有显示边框):
发布于 2012-06-01 19:55:13
你可以通过用div标签包装每个输入元素,并给它一个边框和一个向左浮动…如下所示:
<div style="border:1px solid red;float:left">
<input type="radio".. />
</div>
No, I do not waive confidentiality
发布于 2013-01-18 05:13:22
input[type=radio]{
outline: 1px solid red
}
发布于 2017-05-05 18:39:31
我知道这已经有四年的历史了,但我想出了一个使用CSS伪元素的很好的解决方案。
我的要求是在验证中突出显示一个未选中的复选框或单选按钮。
<input type="radio" class="required" name="radio1"/>
/* Radio button and Checkbox .required needs an after to show */
input[type=radio].required::after, input[type=checkbox].required::after {
display: block;
width: 100%;
height: 100%;
background: transparent;
content: '';
border: 2px solid red !important;
box-sizing: border-box;
}
/* Radio buttons are round, so add 100% border radius. */
input[type=radio].required::after {
border-radius:100%;
}
https://stackoverflow.com/questions/10849626
复制相似问题