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

我试图在一些单选按钮周围加上一个花哨的红色边框，但它并没有出现在Firefox最新版本或Chrome最新版本中。在IE9/IE8中工作良好

我表单上每个必需的输入元素都有一个由MVC3放入的data val required属性。当我们有文本或文本区域输入时，所有浏览器都会加上红色边框，但我很难用单选按钮。对于IE来说，它是可行的，但其他浏览器不会在它周围加上红色边框

css:

查看来源：

<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没有边框）：

---

并非所有浏览器都支持单选按钮和复选框周围的边框。几年前，我投票支持Gecko中包含一个bug，但到目前为止，他们还没有实现它。

你可以用div标记包装每个输入元素，并给它一个边框和一个左浮点。。。像这样：

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

不，我不放弃保密

这可能会帮助您：

.style{
边框：1px纯红；
宽度：20px；
高度：20px；
文本对齐：居中；
边缘顶部：2倍；
背景色：#f0ffff；
}

---

使用jquery完成代码

试试这个

在输入周围放置一个div，并为该div分配一个类，如下所示：

<div class="custom"><input type="radio"></div>

这将在单选按钮周围创建一个漂亮的红色边框。如果使用复选框，只需从css中删除边框半径：30px。根据具体情况，你可能需要在按钮中间加一点填充物，但这对我来说很有效

编辑：您还需要将以下CSS分配给div，使其正确对齐

.custom {display: inline;}

---

我知道这已经四年了，但我用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%;
}

/*单选按钮和复选框。必填项需要在显示后显示*/
输入[type=radio]。必选：：after，输入[type=checkbox]。必选：：after{
显示：块；
宽度：100%；
身高：100%；
背景：透明；
内容：''；
边框：2件纯红！重要；
框大小：边框框；
}
/*单选按钮是圆形的，因此添加100%的边界半径*/
输入[type=radio]。必需：：之后{
边界半径：100%；
}

看来我可能得把它包在一堆div或其他什么东西上？我可以在哪里投票？；-）如果你愿意做整个标签，并且不能忍受如此干净的标记，这里有一种方法可以为它们设置样式。在这种情况下，我希望它在需要时突出显示，但在它无效时，您可以做同样的事情（class='error'vs[required]）<代码>大纲被浏览器广泛用于表示焦点。如果你这样做，你可能会失败WCAG2.0WebAccessibility。这太棒了，谢谢！！！

<div class="custom"><input type="radio"></div>

.custom {border: 1px solid red; border-radius: 30px; padding: 3px 3px 0 3px; background: red;}

.custom {display: inline;}

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