16

我试图在一些单选按钮周围设置一个花哨的红色边框，但它没有出现在 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 没有边框）： 在此处输入图像描述

4

7 回答 7

56 
input[type=radio]{
    outline: 1px solid red
}
于 2013-01-17T21:13:21.707 回答
10

我知道这已经四年了，但我想出了一个使用 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%;
}
于 2017-05-05T10:39:30.593 回答
7

您可以通过用 div 标签包装每个输入元素并给它一个边框和一个左浮动来完成......像这样：

<div style="border:1px solid red;float:left">
   <input type="radio".. />
</div>
No, I do not waive confidentiality
于 2012-06-01T11:55:12.727 回答
2

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

于 2012-06-01T11:50:25.287 回答
2

这可能会帮助您：

.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>

在 JSFiddle 上查看

于 2012-06-01T12:29:44.203 回答
0

使用jquery完成代码

https://jsfiddle.net/xcb26Lzx/

$(function(){
      $('.layer').css('border',0);
    $('input:radio').change(
    function(){
        if ($(this).is(':checked')) {
            $('.layer').css('border','1px solid red');
        }
    });
});
于 2015-04-04T07:06:14.623 回答
0

尝试这个...

在输入周围放置一个 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;}

小提琴链接

于 2016-07-15T00:28:50.767 回答