blocks|key|1301075|text|我建议使用“轮廓”而不是“边框”。例如：outline:+1px+solid+#1e5180。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1301076|entityMap^0|K|Q|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>I suggest using "outline" instead of "border". For example: <code>outline: 1px solid #1e5180</code>.</p>


blocks|key|1085840|text|你应该使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1085841|-moz-appearance:none;
-webkit-appearance:none;
-o-appearance:none;|code-block|syntax|javascript|1085842|然后你可以去掉默认的复选框image/style，并对其进行样式设置。无论如何，边框在Firefox中仍然存在|1085843|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>You should use</p>

<pre><code>-moz-appearance:none;
-webkit-appearance:none;
-o-appearance:none;
</code></pre>

<p>Then you get rid of the default checkbox image/style and can style it. Anyway a border will still be there in Firefox</p>


blocks|key|1086023|text|您可以使用框阴影来伪造边框：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1086024|-webkit-box-shadow:+0px+0px+0px+1px+rgba(255,0,0,1);
-moz-box-shadow:+0px+0px+0px+1px+rgba(255,0,0,1);
box-shadow:+0px+0px+0px+1px+rgba(255,0,0,1);|code-block|syntax|javascript|1086025|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 can use box shadows to fake a border:</p>

<pre><code>-webkit-box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
-moz-box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
</code></pre>


blocks|key|1301310|text|这是我的版本，它使用FontAwesome作为复选框，我认为FontAwesome几乎每个人都在使用，所以可以放心地假设你也有它。没有在IE/Edge中测试，我认为没有人关心。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1301311|​|1301312|input[type=checkbox]+{
	-moz-appearance:none;
	-webkit-appearance:none;
	-o-appearance:none;
	outline:+none;
	content:+none;	
}

input[type=checkbox]:before+{
	font-family:+"FontAwesome";
++++content:+"\f00c";
++++font-size:+15px;
++++color:+transparent+!important;
++++background:+#fef2e0;
++++display:+block;
++++width:+15px;
++++height:+15px;
++++border:+1px+solid+black;
++++margin-right:+7px;
}

input[type=checkbox]:checked:before+{

	color:+black+!important;
}|code-block|syntax|javascript|1301313|<link+href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"+rel="stylesheet"/>

<input+type="checkbox">|1301314|1301315|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Here's my version that uses FontAwesome for checkbox ticker, I think FontAwesome is used by almost everybody so it's safe to assume you have it too. Not tested in IE/Edge and I don't think anyone cares.</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>input[type=checkbox] {
	-moz-appearance:none;
	-webkit-appearance:none;
	-o-appearance:none;
	outline: none;
	content: none;	
}

input[type=checkbox]:before {
	font-family: "FontAwesome";
    content: "\f00c";
    font-size: 15px;
    color: transparent !important;
    background: #fef2e0;
    display: block;
    width: 15px;
    height: 15px;
    border: 1px solid black;
    margin-right: 7px;
}

input[type=checkbox]:checked:before {

	color: black !important;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/&gt;

&lt;input type="checkbox"&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1301129|text|我知道我已经过时了..。但一个小的解决办法是将您的复选框放在标签标签内，然后使用边框设置标签的样式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1301130|<label+class='hasborder'><input+type='checkbox'+/></label>|code-block|syntax|javascript|1301131|然后设置标签样式：|1301132|.hasborder+{+border:1px+solid+#F00;+}|1301133|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I'm outdated I know.. But a little workaround would be to put your checkbox inside a label tag, then style the label with a border:</p>

<pre><code>&lt;label class='hasborder'&gt;&lt;input type='checkbox' /&gt;&lt;/label&gt;
</code></pre>

<p>then style the label:</p>

<pre><code>.hasborder { border:1px solid #F00; }
</code></pre>


blocks|key|1300944|text|如果你想彻底改变视觉外观，那么在纯css中样式化复选框(以及许多其他的输入元素)是不可能的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1300945|最好的办法是实现像jqTransform一样的东西，它实际上用图像替换输入，并对其应用javascript行为来模仿复选框(或其他元素)。|offset|length|1300946|entityMap|0|LINK|mutability|MUTABLE|url|http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/^0|0|9|B|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

<p>Styling checkboxes (and many other input elements for that mater) is not really possible with pure css if you want to drastically change the visual appearance.</p>

<p>Your best bet is to implement something like <a href="http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/" rel="noreferrer">jqTransform</a> does which actually replaces you inputs with images and applies javascript behaviour to it to mimic a checkbox (or other element for that matter)</p>


blocks|key|1085964|text|下面是一个简单的方法(在伪元素/类之前或之后使用)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1085965|input[type=checkbox]+{
++++position:+relative;
}

input[type=checkbox]:after+{
++++position:+absolute;
++++top:+0;
++++left:+0;
++++/*+Above+three+lines+allow+the+checkbox:after+position+at+checkbox's+position+*/
++++content:+'';
++++width:+32px;
++++height:+32px;
++++z-index:+1;+/*+This+allows+the+after+overlap+the+checkbox+*/
++++/*+Anything+you+want+*/
}|code-block|syntax|javascript|1085966|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>Here is a simple way (to use before or after pseudo elements / classes):</p>

<pre><code>input[type=checkbox] {
    position: relative;
}

input[type=checkbox]:after {
    position: absolute;
    top: 0;
    left: 0;
    /* Above three lines allow the checkbox:after position at checkbox's position */
    content: '';
    width: 32px;
    height: 32px;
    z-index: 1; /* This allows the after overlap the checkbox */
    /* Anything you want */
}
</code></pre>


blocks|key|1086129|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1086130|<!DOCTYPE+html>
<html>
<head>
<style>+

.abc123
{
	-webkit-appearance:none;
++++width:+14px;
++++height:+14px;
++++display:+inline-block;
++++background:+#FFFFFF;
	border:+1px+solid+rgba(220,220,225,1);
}
.abc123:after+{
++content:+"";
++display:+inline-block;
++position:+relative;
++top:+-3px;
++left:+4px;
++width:+3px;
++height:+5px;
++border-bottom:+1px+solid+#fff;
++border-right:+1px+solid+#fff;
++-webkit-transform:+rotate(45deg);
}

input[type=checkbox]:checked+++{
++++background:+#327DFF;
++++outline:+none;
++++border:+1px+solid+rgba(50,125,255,1);
}
input:focus,input:active+{
	outline:+none;
}

input:hover+{
+++border:+1px+solid+rgba(50,125,255,1);
}

</style>
</head>
<body>

<input+class="abc123"+type="checkbox"></input>


</body>
</html>|code-block|syntax|javascript|1086131|1086132|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|K|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|M|8|@]|9|@]|A|$]]]|I|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;style&gt; 

.abc123
{
	-webkit-appearance:none;
    width: 14px;
    height: 14px;
    display: inline-block;
    background: #FFFFFF;
	border: 1px solid rgba(220,220,225,1);
}
.abc123:after {
  content: "";
  display: inline-block;
  position: relative;
  top: -3px;
  left: 4px;
  width: 3px;
  height: 5px;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: rotate(45deg);
}

input[type=checkbox]:checked   {
    background: #327DFF;
    outline: none;
    border: 1px solid rgba(50,125,255,1);
}
input:focus,input:active {
	outline: none;
}

input:hover {
   border: 1px solid rgba(50,125,255,1);
}

&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;input class="abc123" type="checkbox"&gt;&lt;/input&gt;


&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1086176|text|实际上你只需要做两件事|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1086177|outline:+1px+solid+#63DDCF
border:+none+!important;|code-block|syntax|javascript|1086178|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>It's actually just two things you have to do</p>
<pre><code>outline: 1px solid #63DDCF
border: none !important;
</code></pre>


blocks|key|1300884|text|将其放在div中并向div添加边框|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1300885|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>put it in a div and add border to the div</p>


blocks|key|1085807|text|<div+style="border-style:+solid;width:13px">+
+++<input+type="checkbox"+name="mycheck"+style="margin:0;padding:0;">
+++</input>+
</div>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1085808|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>&lt;div style="border-style: solid;width:13px"&gt; 
   &lt;input type="checkbox" name="mycheck" style="margin:0;padding:0;"&gt;
   &lt;/input&gt; 
&lt;/div&gt;
</code></pre>


<p>How can I change checkbox (input) border's style? I've put <code>border:1px solid #1e5180</code> upon it, but in FireFox 3.5, nothing happens!</p>


How to change checkbox's border style in CSS?

如何更改复选框(输入)边框的样式？我已经把border:1px solid #1e5180放在上面了，但是在FireFox 3.5中，什么也没有发生！

问如何在CSS中改变checkbox的边框样式？
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在CSS中改变checkbox的边框样式？EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在CSS中改变checkbox的边框样式？
EN