如何在CSS中更改checkbox的边框样式？

如何更改checkbox（input）边框的样式？ 我已经把border:1px solid #1e5180放在它上面，但是在FireFox 3.5中，没有任何反应！

Answer 1

如果在浏览器中发生任何事情，我会感到惊讶。 这是浏览器往往不会让你的风格变得如此之多的优秀表单元素之一，而且人们通常会尝试用javascript代替，以便可以对代码进行样式/代码编排，使其看起来像checkbox一样。

这是一个例子： prettyCheckboxes 。

Answer 2

我build议使用“大纲”而不是“边框”。 例如： outline: 1px solid #1e5180 。

Answer 3

你应该使用

 -moz-appearance:none; -webkit-appearance:none; -o-appearance:none; 

然后你摆脱默认的checkbox图像/风格，可以风格。 无论如何，边界仍然会在Firefox中

Answer 4

我已经过时，我知道..但有一个解决方法是将您的checkbox放入标签标签中，然后使用边框对标签进行样式设置：

 <label class='hasborder'><input type='checkbox' /></label> 

然后风格的标签：

 .hasborder { border:1px solid #F00; } 

Answer 5

对于Firefox ， Chrome和Safari ，没有任何反应。

对于IE ，在checkbox外（不作为checkbox的一部分）应用边框，checkbox中的“幻想”阴影效果消失（显示为旧式checkbox）。

对于Opera而言 ，边框样式实际上是在checkbox元素上应用边框。
Opera也比其他浏览器更好地处理checkbox上的其他样式： 颜色作为滴答的颜色应用，背景颜色作为背景颜色应用于checkbox（IE应用背景，就像checkbox位于<div>中一样背景））。

结论

最简单的解决scheme是将checkbox包装在像其他人所build议的<div> 。
如果你想完全控制外观，你将不得不采取先进的图像/ JavaScript的方法，也被别人的意思。

Answer 6

如果您想彻底改变视觉外观，那么为纯CSSdevise样式checkbox（以及其他许多input元素）是不可能的。

最好的办法就是实现类似jqTransform的东西，它实际上将图像replace为input，并将javascript行为应用于模仿checkbox（或其他元素）

Answer 7

这是一个纯CSS（无图像）跨浏览器解决scheme基于马丁的自定义checkbox和单选buttonCSS3 LINK： http : //martinivanov.net/2012/12/21/imageless-custom-checkboxes-and-radio-buttons -with-CSS3-重新/

这里是一个jsFiddle： http : //jsfiddle.net/DJRavine/od26wL6n/

我已经在以下浏览器上testing了这一点：

• 火狐（41.0.2）（42）
• Google Chrome（46.0.2490.80米）
• 歌剧（33.0.1990.43）
• Internet Explorer（11.0.10240.16431 [更新版本：11.0.22]）
• Microsoft Edge（20.10240.16384.0）
• Safari Mobile iPhone iOS9（601.1.46）

 label, input[type="radio"] + span, input[type="radio"] + span::before, label, input[type="checkbox"] + span, input[type="checkbox"] + span::before { display: inline-block; vertical-align: middle; } label *, label * { cursor: pointer; } input[type="radio"], input[type="checkbox"] { opacity: 0; position: absolute; } input[type="radio"] + span, input[type="checkbox"] + span { font: normal 11px/14px Arial, Sans-serif; color: #333; } label:hover span::before, label:hover span::before { -moz-box-shadow: 0 0 2px #ccc; -webkit-box-shadow: 0 0 2px #ccc; box-shadow: 0 0 2px #ccc; } label:hover span, label:hover span { color: #000; } input[type="radio"] + span::before, input[type="checkbox"] + span::before { content: ""; width: 12px; height: 12px; margin: 0 4px 0 0; border: solid 1px #a8a8a8; line-height: 14px; text-align: center; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; background: #f6f6f6; background: -moz-radial-gradient(#f6f6f6, #dfdfdf); background: -webkit-radial-gradient(#f6f6f6, #dfdfdf); background: -ms-radial-gradient(#f6f6f6, #dfdfdf); background: -o-radial-gradient(#f6f6f6, #dfdfdf); background: radial-gradient(#f6f6f6, #dfdfdf); } input[type="radio"]:checked + span::before, input[type="checkbox"]:checked + span::before { color: #666; } input[type="radio"]:disabled + span, input[type="checkbox"]:disabled + span { cursor: default; -moz-opacity: .4; -webkit-opacity: .4; opacity: .4; } input[type="checkbox"] + span::before { -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } input[type="radio"]:checked + span::before { content: "\2022"; font-size: 30px; margin-top: -1px; } input[type="checkbox"]:checked + span::before { content: "\2714"; font-size: 12px; } input[class="blue"] + span::before { border: solid 1px blue; background: #B2DBFF; background: -moz-radial-gradient(#B2DBFF, #dfdfdf); background: -webkit-radial-gradient(#B2DBFF, #dfdfdf); background: -ms-radial-gradient(#B2DBFF, #dfdfdf); background: -o-radial-gradient(#B2DBFF, #dfdfdf); background: radial-gradient(#B2DBFF, #dfdfdf); } input[class="blue"]:checked + span::before { color: darkblue; } input[class="red"] + span::before { border: solid 1px red; background: #FF9593; background: -moz-radial-gradient(#FF9593, #dfdfdf); background: -webkit-radial-gradient(#FF9593, #dfdfdf); background: -ms-radial-gradient(#FF9593, #dfdfdf); background: -o-radial-gradient(#FF9593, #dfdfdf); background: radial-gradient(#FF9593, #dfdfdf); } input[class="red"]:checked + span::before { color: darkred; } 

  <label><input type="radio" checked="checked" name="radios-01" /><span>checked radio button</span></label> <label><input type="radio" name="radios-01" /><span>unchecked radio button</span></label> <label><input type="radio" name="radios-01" disabled="disabled" /><span>disabled radio button</span></label> <br/> <label><input type="radio" checked="checked" name="radios-02" class="blue" /><span>checked radio button</span></label> <label><input type="radio" name="radios-02" class="blue" /><span>unchecked radio button</span></label> <label><input type="radio" name="radios-02" disabled="disabled" class="blue" /><span>disabled radio button</span></label> <br/> <label><input type="radio" checked="checked" name="radios-03" class="red" /><span>checked radio button</span></label> <label><input type="radio" name="radios-03" class="red" /><span>unchecked radio button</span></label> <label><input type="radio" name="radios-03" disabled="disabled" class="red" /><span>disabled radio button</span></label> <br/> <label><input type="checkbox" checked="checked" name="checkbox-01" /><span>selected checkbox</span></label> <label><input type="checkbox" name="checkbox-02" /><span>unselected checkbox</span></label> <label><input type="checkbox" name="checkbox-03" disabled="disabled" /><span>disabled checkbox</span></label> <br/> <label><input type="checkbox" checked="checked" name="checkbox-01" class="blue" /><span>selected checkbox</span></label> <label><input type="checkbox" name="checkbox-02" class="blue" /><span>unselected checkbox</span></label> <label><input type="checkbox" name="checkbox-03" disabled="disabled" class="blue" /><span>disabled checkbox</span></label> <br/> <label><input type="checkbox" checked="checked" name="checkbox-01" class="red" /><span>selected checkbox</span></label> <label><input type="checkbox" name="checkbox-02" class="red" /><span>unselected checkbox</span></label> <label><input type="checkbox" name="checkbox-03" disabled="disabled" class="red" /><span>disabled checkbox</span></label> 

Answer 8

您可以使用框阴影来伪造边框：

 -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); 

Answer 9

不，你仍然不能devise自己的checkbox，但我（终于）想出了如何在保持点击checkbox的function的同时设置错觉。 这意味着即使光标不完全静止，也可以切换，无需select文本或触发拖放操作！

这个例子是使用一个跨度“button”以及标签中的一些文本，但它给了你如何使checkbox不可见并且在其后面绘制任何东西的想法。

这个解决scheme可能也适合单选button。

下面的工作在IE9，FF30.0和Chrome 40.0.2214.91，只是一个基本的例子。 您仍然可以将它与背景图像和伪元素结合使用。

http://jsfiddle.net/o0xo13yL/1/

 label { display: inline-block; position: relative; /* needed for checkbox absolute positioning */ background-color: #eee; padding: .5rem; border: 1px solid #000; border-radius: .375rem; font-family: "Courier New"; font-size: 1rem; line-height: 1rem; } label > input[type="checkbox"] { display: block; position: absolute; /* remove it from the flow */ width: 100%; height: 100%; margin: -.5rem; /* negative the padding of label to cover the "button" */ cursor: pointer; opacity: 0; /* make it transparent */ z-index: 666; /* place it on top of everything else */ } label > input[type="checkbox"] + span { display: inline-block; width: 1rem; height: 1rem; border: 1px solid #000; margin-right: .5rem; } label > input[type="checkbox"]:checked + span { background-color: #666; } <label> <input type="checkbox" /> <span>&nbsp;</span>Label text </label> 

Answer 10

这是一个简单的方法（在伪元素/类之前或之后使用）：

 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 */ } 

Answer 11

把它放在一个div中，并为div添加边框

Answer 12

 <div style="border-style: solid;width:13px"> <input type="checkbox" name="mycheck" style="margin:0;padding:0;"> </input> </div>