将css边框放在单选按钮周围

Question

我试图在一些单选按钮周围设置一个鲜艳的红色边框,但它没有出现在Firefox最新版或Chrome最新版中.在IE9/IE8中正常工作.

我需要的表单上的每个输入元素都有一个由MVC3放入的data-val-required属性.当我们有文本或textarea输入时,所有浏览器都会在红色边框中放入花花公子,但我正在努力使用单选按钮.对于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显示没有边框):

Answer 1

input[type=radio]{
    outline: 1px solid red
}

Answer 2

我知道这已经有四年了,但我想出了一个使用CSS Pseudo元素的好解决方案.

我的要求是在验证中突出显示未选中的复选框或单选按钮.

<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%;
}

Answer 3

你可以通过用<div>标签包装每个<input type ="radio"/>并给它一个边框和一个浮点数来完成...像这样

<div style="border:1px solid red;float:left">
   <input type="radio".. />
</div>
No, I do not waive confidentiality