在单选按钮上放置CSS边框

前端之家收集整理的这篇文章主要介绍了在单选按钮上放置CSS边框前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试在一些单选按钮周围得到一个大胆的红色边框,但最新的Chrome或Chrome最新版本并没有显示.在IE9 / IE8中工作正常.

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

解决方法

你可以通过将每个& input type =“radio”/>与< div>标签,并给它一个边框和浮动左…像这样
<div style="border:1px solid red;float:left">
   <input type="radio".. />
</div>
No,I do not waive confidentiality

猜你在找的CSS相关文章