在单选按钮周围放置 css 边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10849626/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Putting css borders around radio buttons
提问by Robert Koch
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.
我试图在一些单选按钮周围获得一个花哨的红色边框，但它没有出现在最新的 Firefox 或最新的 Chrome 中。在 IE9/IE8 中工作正常。
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.
我的表单上需要的每个输入元素都有一个由 MVC3 放入的 data-val-required 属性。当我们有文本或文本区域输入时，所有浏览器都会放入红色边框，但我正在努力使用单选按钮。对于 IE，它可以工作，但其他浏览器不会在它周围放置红色边框。
css:
css：
input[data-val-required], select[data-val-required], textarea[data-val-required]
{
background-color: #F0FFFF;
border: 1px solid red;
}
view-source:
查看源：
<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>
What it looks like in IE (Firefox and Chrome shows no borders):
它在 IE 中的样子（Firefox 和 Chrome 没有边框）：
采纳答案by Jamie Hartnoll
You could accomplish by wrapping each < input type="radio" /> with < div > tag and give it a border and a float left... like this
你可以通过用 < div > 标签包裹每个 < input type="radio" /> 来完成，并给它一个边框和一个左浮动......像这样
<div style="border:1px solid red;float:left">
<input type="radio".. />
</div>
No, I do not waive confidentiality
回答by jcleve
input[type=radio]{
outline: 1px solid red
}
回答by Jamie Hartnoll
I know this is four years old, but I came up with a nice solution using CSS Pseudo elements.
我知道这已经四年了，但我想出了一个使用 CSS Pseudo 元素的不错的解决方案。
My requirement was to highlight an unchecked checkbox, or radio button in validation.
我的要求是在验证中突出显示未选中的复选框或单选按钮。
<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%;
}
回答by Jamie Hartnoll
This may help you:
这可能会帮助您：
.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>回答by John Conde
Not all browsers support borders around radio buttons and checkboxes. I voted for a bug years ago to have this included in Gecko but so far they haven't implemented it.
并非所有浏览器都支持单选按钮和复选框周围的边框。几年前我投票赞成一个错误，将它包含在 Gecko 中，但到目前为止他们还没有实现它。
回答by Aravind Sivam
Complete code using jquery
使用jquery完成代码
https://jsfiddle.net/xcb26Lzx/
https://jsfiddle.net/xcb26Lzx/
$(function(){
$('.layer').css('border',0);
$('input:radio').change(
function(){
if ($(this).is(':checked')) {
$('.layer').css('border','1px solid red');
}
});
});
回答by Jeremy Brown
Try this...
尝试这个...
Put a div around the input and assign a class to the div like so:
在输入周围放置一个 div 并为该 div 分配一个类，如下所示：
<div class="custom"><input type="radio"></div>
Then open your custom css file and add this CSS
然后打开您的自定义 css 文件并添加此 CSS
.custom {border: 1px solid red; border-radius: 30px; padding: 3px 3px 0 3px; background: red;}
This should create a nice red border around the radio button. If you're using a check box you would simply remove the border-radius: 30px from the css. Depending you may need to play with the padding a bit to center the button, but this worked for me.
这应该在单选按钮周围创建一个漂亮的红色边框。如果您使用复选框，您只需从 css 中删除 border-radius: 30px 。根据您可能需要稍微调整一下填充以将按钮居中，但这对我有用。
Edit: You will also want to assign the following CSS to the div so it lines up correctly.
编辑：您还需要将以下 CSS 分配给 div，使其正确排列。
.custom {display: inline;}
