blocks|key|556706|text|并非所有浏览器都支持单选按钮和复选框的边框。几年前我投票支持在Gecko中包含这个bug，但到目前为止他们还没有实现它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|556707|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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


blocks|key|340788|text|你可以通过用div标签包装每个输入元素，并给它一个边框和一个向左浮动…如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|340789|<div+style="border:1px+solid+red;float:left">
+++<input+type="radio"..+/>
</div>
No,+I+do+not+waive+confidentiality|code-block|syntax|javascript|340790|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You could accomplish by wrapping each input element with div tag and give it a border and a float left... like this:</p>
<pre><code>&lt;div style=&quot;border:1px solid red;float:left&quot;&gt;
   &lt;input type=&quot;radio&quot;.. /&gt;
&lt;/div&gt;
No, I do not waive confidentiality
</code></pre>


blocks|key|340834|text|这可能会对你有所帮助：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|340835|​|340836|.style+{
++border:+1px+solid+red;
++width:+20px;
++height:+20px;
++text-align:+center;
++margin-top:+2px;
++background-color:+#f0ffff;
}|code-block|syntax|javascript|340837|<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>|340838|340839|View+on+JSFiddle|offset|length|340840|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/rp9HJ/1/^0|0|0|0|0|0|0|G|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|12|8|@]|9|@$N|13|O|14|1|15]]|A|$]]|$1|P|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|W]]]]

<p>This may help you:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.style {
  border: 1px solid red;
  width: 20px;
  height: 20px;
  text-align: center;
  margin-top: 2px;
  background-color: #f0ffff;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="style"&gt;
  &lt;input type="radio" /&gt;
&lt;/div&gt;
&lt;div class="style"&gt;
  &lt;input type="radio" /&gt;
&lt;/div&gt;
&lt;div class="style"&gt;
  &lt;input type="radio" /&gt;
&lt;/div&gt;
&lt;div class="style"&gt;
  &lt;input type="radio" /&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><a href="http://jsfiddle.net/rp9HJ/1/" rel="nofollow noreferrer">View on JSFiddle</a></p>


blocks|key|556822|text|input[type=radio]{
++++outline:+1px+solid+red
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|556823|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>input[type=radio]{
    outline: 1px solid red
}
</code></pre>


blocks|key|340917|text|使用jquery完成代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|340918|https://jsfiddle.net/xcb26Lzx/|offset|length|340919|$(function(){
++++++$('.layer').css('border',0);
++++$('input:radio').change(
++++function(){
++++++++if+($(this).is(':checked'))+{
++++++++++++$('.layer').css('border','1px+solid+red');
++++++++}
++++});
});|code-block|syntax|javascript|340920|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|U|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|C]]]]

<p>Complete code using jquery</p>

<p><a href="https://jsfiddle.net/xcb26Lzx/" rel="nofollow">https://jsfiddle.net/xcb26Lzx/</a></p>

<pre><code>$(function(){
      $('.layer').css('border',0);
    $('input:radio').change(
    function(){
        if ($(this).is(':checked')) {
            $('.layer').css('border','1px solid red');
        }
    });
});
</code></pre>


blocks|key|340992|text|试试这个。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|340993|在输入周围放置一个div，并为该div分配一个类，如下所示：|340994|<div+class="custom"><input+type="radio"></div>|code-block|syntax|javascript|340995|然后打开您的自定义css文件并添加此CSS|340996|.custom+{border:+1px+solid+red;+border-radius:+30px;+padding:+3px+3px+0+3px;+background:+red;}|340997|这应该会在单选按钮周围创建一个漂亮的红色边框。如果您使用的是一个复选框，您只需从css中删除border-radius:+30px即可。取决于你可能需要玩一点填充来居中按钮，但这对我很管用。|340998|编辑:您还需要将以下CSS分配给div，以使其正确排列。|340999|.custom+{display:+inline;}|341000|fiddle+link|offset|length|341001|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/hr0u2dcz/10/^0|0|0|0|0|0|0|0|0|0|B|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|16|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|17|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|18|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|19|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1A|8|@]|9|@]|A|$]]|$1|Q|3|R|5|F|7|1B|8|@]|9|@]|A|$G|H]]|$1|S|3|T|5|6|7|1C|8|@]|9|@$U|1D|V|1E|1|1F]]|A|$]]|$1|W|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]]]

<p>Try this... </p>

<p>Put a div around the input and assign a class to the div like so: </p>

<pre><code>&lt;div class="custom"&gt;&lt;input type="radio"&gt;&lt;/div&gt;
</code></pre>

<p>Then open your custom css file and add this CSS</p>

<pre><code>.custom {border: 1px solid red; border-radius: 30px; padding: 3px 3px 0 3px; background: red;}
</code></pre>

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

<p>Edit: You will also want to assign the following CSS to the div so it lines up correctly. </p>

<pre><code>.custom {display: inline;}
</code></pre>

<p><a href="https://jsfiddle.net/hr0u2dcz/10/" rel="nofollow">fiddle link</a></p>


blocks|key|341051|text|我知道这已经有四年的历史了，但我想出了一个使用CSS伪元素的很好的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|341052|我的要求是在验证中突出显示一个未选中的复选框或单选按钮。|341053|<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%25;
++++height:+100%25;
++++background:+transparent;
++++content:+'';
++++border:+2px+solid+red+!important;
++++box-sizing:+border-box;
}
/*+Radio+buttons+are+round,+so+add+100%25+border+radius.+*/
input[type=radio].required::after+{
+++++border-radius:100%25;
}|code-block|syntax|javascript|341054|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I know this is four years old, but I came up with a nice solution using CSS Pseudo elements.</p>

<p>My requirement was to highlight an unchecked checkbox, or radio button in validation.</p>

<pre><code>&lt;input type="radio" class="required" name="radio1"/&gt;

/* 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%;
}
</code></pre>


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

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

<p>css:</p>

<pre><code>input[data-val-required], select[data-val-required], textarea[data-val-required]
{
    background-color: #F0FFFF;
    border: 1px solid red;
}
</code></pre>

<p>view-source:</p>

<pre><code>&lt;label for="WaiveSelect"&gt;Do you waive confidentiality?&lt;/label&gt;&lt;br /&gt;
&lt;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" /&gt; No, I do not waive confidentiality&lt;br /&gt;
&lt;input id="WaiveSelect_2" name="WaiveSelect" type="radio" value="2" /&gt; Yes, I waive confidentiality&lt;br /&gt;
&lt;input id="WaiveSelect_3" name="WaiveSelect" type="radio" value="3" /&gt; Yes, I waive confidentiality except to the client&lt;br /&gt;
&lt;span class="field-validation-valid" data-valmsg-for="WaiveSelect" data-valmsg-replace="true"&gt;&lt;/span&gt;
</code></pre>

<p>What it looks like in IE (Firefox and Chrome shows no borders):
<img src="https://i.stack.imgur.com/AN54U.png" alt="enter image description here"></p>


Putting css borders around radio buttons

我试图在一些单选按钮周围添加一个花哨的红色边框，但在Firefox最新版本或Chrome最新版本中没有显示出来。在IE9/IE8中工作正常。表单上需要的每个输入元素都有一个由MVC3放入的data-val-required属性。当我们有文本或文本区输入时，所有浏览器都会放入红色边框，但我正在为单选按钮而苦苦挣扎。对于I...

问在单选按钮周围放置css边框
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在单选按钮周围放置css边框EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在单选按钮周围放置css边框
EN