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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (50)

我试图在某些单选按钮周围加上一个花哨的红色边框,但它并未显示在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显示无国界):

提问于
用户回答回答于

可以通过使用<div>标记包装每个<inputtype=“Radio”/>来完成任务,并给它一个边框和一个左浮动...如下所示

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

所属标签

可能回答问题的人

  • Hanzo

    6 粉丝0 提问7 回答
  • Richel

    9 粉丝0 提问3 回答
  • 上云小秘书

    15 粉丝0 提问2 回答
  • 风华一代

    3 粉丝469 提问2 回答

扫码关注云+社区

领取腾讯云代金券