将css边框放在单选按钮周围 [英] Putting css borders around radio buttons

问题描述

我想在一些单选按钮周围得到一个红色的边框，但它不会出现在Firefox最新或Chrome最新。在IE9 / IE8中工作正常。

I'm trying to get a garish red border around some radio buttons, but it is not showing up in Firefox latest or Chrome latest. Work fine in IE9/IE8.

我需要的表单上的每个输入元素都有一个由MVC3插入的数据值必需属性。所有浏览器放在红色边框只是dandy当我们有一个文本或textarea输入，但我努力与单选按钮。对于IE，它的工作原理，但其他浏览器不会在它周围的红色边框。

Each of the input element on my form that are required has a data-val-required attribute put in by MVC3. All browsers puts in the red borders just dandy when we have a text or textarea inputs, but am struggling with the radio button. For IE, it works, but other browsers won't put the red border around it.

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

What it looks like in IE (Firefox and Chrome shows no borders):

推荐答案

您可以通过将每个< input type =radio/> with< div> tag，给它一个边框和一个float像这样

You could accomplish by wrapping each < input type="radio" /> with < div > tag and give it a border and a float left... like this

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

这篇关于将css边框放在单选按钮周围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！