在单选按钮周围添加CSS边框

Question

我想在一些单选按钮周围获得鲜艳的红色边框，但在最新版本的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没有边框）：

- Rob Koch

---

如果你想处理整个标签并且能够忍受不太干净的标记，这是一种样式设置的方式。在这种情况下，我希望在需要时突出显示它，但是当它无效时（class ='error' vs [required]）也可以做同样的事情。http://jsfiddle.net/jinglesthula/tsahh2jg/ - jinglesthula

Answer 1

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

- jcleve

---

"outline" 是浏览器用于指示焦点的常见方式。如果你使用它，可能会违反 WCAG 2.0 网页无障碍标准中 要求 2.4.7 的规定。 - Gqqnbig

Answer 2

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

- Jamie Hartnoll

---

我喜欢这种方法的原因是它不需要任何额外的HTML元素。 - Dylan Kinnett

也可以使用:indeterminate来突出显示它们，当组内没有任何选中时 - undefined

Answer 3

您可以通过使用div标签包装每个输入元素，并为其设置边框和左浮动来实现...像这样：

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

- user1263800

Answer 4

并非所有浏览器都支持在单选按钮和复选框周围添加边框。我多年前为将此功能包含在Gecko中而投了一票，但到目前为止他们还没有实现它。

- John Conde

---

似乎我需要将它包裹在一堆div或其他东西中？我在哪里可以投票？;-) - Rob Koch

Answer 5

这可能会对您有所帮助：

.style {
  border: 1px solid red;
  width: 20px;
  height: 20px;
  text-align: center;
  margin-top: 2px;
  background-color: #f0ffff;
}

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

View on JSFiddle

- user1396101

Answer 6

使用jQuery完成代码

https://jsfiddle.net/xcb26Lzx/

$(function(){
      $('.layer').css('border',0);
    $('input:radio').change(
    function(){
        if ($(this).is(':checked')) {
            $('.layer').css('border','1px solid red');
        }
    });
});

- Aravind Sivam

Answer 7

试试这个...

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

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

然后打开您的自定义CSS文件并添加此CSS

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

这将在单选按钮周围创建一个漂亮的红色边框。如果您正在使用复选框，则只需从CSS中删除border-radius: 30px即可。根据情况，您可能需要稍微调整填充以使按钮居中，但这对我有效。

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

.custom {display: inline;}

代码片段链接

- Jeremy Brown