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

如何更改复选框(输入)边框的样式？我戴上border:1px solid #1e5180它,但在FireFox 3.5中,没有任何反应!

1> 小智..：

---

我建议使用"outline"而不是"border".例如:outline: 1px solid #1e5180.

---

@Yises你要担心IE7吗？哎呀,对不起.

---

outline非常好,它适用于所有输入和选择框,这对".error"类很有用.

---

大纲是一个很好的选择.

---

使用大纲时,您可能需要在css中添加`!important`.我在Firefox 12.0中测试了这个并没有!重要的是,只要我点击复选框,轮廓就会消失.

---

这是一个很好的选择,但大纲的问题是在IE7它不起作用!

2> Valerij..：

---

你应该用

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

然后你摆脱默认的复选框图像/样式,并可以设置它的样式.无论如何,Firefox中仍然存在边框

---

哎呀 - 说得太快了:" - webkit-appearance:none;" 似乎禁用了复选框行为.

---

对我来说(铬5)它没有,你需要设置:检查状态额外

---

Opera可以让你在没有任何额外hackery的情况下设置复选框样式 - 我会放弃-o-appearance风格.-moz-appearance和-webkit-appearance很棒.

3> 小智..：

---

如果在任何浏览器中发生某些事情,我会感到惊讶.这是浏览器往往不会让你风格那么多的优秀表单元素之一,并且人们通常会尝试使用javascript替换它们,以便他们可以设置样式/代码来查看和操作像复选框一样.

这是一个例子:prettyCheckboxes.

---

**Opera**在复选框上处理样式非常好.**IE**有一些包围复选框的样式(不在复选框本身上).

---

现在它们实际上是丑陋的:D

4> Dennis Heide..：

---

您可以使用框阴影伪造边框:

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

5> 小智..：

---

我已经过时了,我知道..但是有一点解决方法是将您的复选框放在标签标签内,然后用边框设置标签样式:

然后设置标签样式:

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

6> Adan Rehtla..：

---

这是一个基于Martin的自定义复选框和带有CSS3 LINK的单选按钮的纯CSS(无图像)跨浏览器解决方案:http://martinivanov.net/2012/12/21/imageless-custom-checkboxes-and-radio-buttons -with-CSS3-重新/

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

我在以下浏览器上测试了这个:

FireFox(41.0.2)(42)

谷歌浏览器(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;
}

 checked radio button
 unchecked radio button
 disabled radio button




 checked radio button
 unchecked radio button
 disabled radio button




 checked radio button
 unchecked radio button
 disabled radio button



 
selected checkbox
unselected checkbox
disabled checkbox



 
selected checkbox
unselected checkbox
disabled checkbox



 
selected checkbox
unselected checkbox
disabled checkbox

7> awe..：

---

对于Firefox,Chrome和Safari,没有任何反应.

对于IE,边框应用于复选框之外(不作为复选框的一部分),复选框中的"奇特"着色效果消失(显示为旧式复选框).

对于Opera,边框样式实际上是在复选框元素上应用边框.
Opera还比其他浏览器更好地处理复选框上的其他样式:颜色应用于刻度线的颜色,背景颜色应用于复选框内的背景颜色(IE应用背景,就好像复选框位于

带背景的内部)) .

结论

最简单的解决方案是将复选框包装在

其他人建议的内容中.
如果你想完全控制外观,你必须采用先进的图像/ javascript方法,也是其他人的意思.

---

用于研究的+1,但将其包含在div中是*不是解决方案.它不会让你设置复选框的样式,它可以让你围绕*复选框设置样式,除非你开始尝试隐藏它并在它上面绘制它会有自己的问题.

8> pendingfox..：

---

这是我使用FontAwesome作为复选框自动收录器的版本,我认为几乎所有人都使用FontAwesome,因此可以安全地假设你也拥有它.没有在IE/Edge中测试,我认为没有人关心.

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

9> ChrisR..：

---

如果您想要彻底改变视觉外观,那么使用纯CSS将无法实现样式复选框(以及该母版的许多其他输入元素).

你最好的办法是实现类似jqTransform的东西,它实际上用图像替换你的输入并对它应用javascript行为来模仿一个复选框(或其他元素)

10> LGT..：

---

不，您仍然不能为复选框本身设置样式，但是我（最后）想出了如何为幻觉设置样式，同时保留单击复选框的功能。这意味着即使光标不是完全静止也可以切换它，而不必冒险选择文本或触发拖放操作！

该示例使用了跨度“按钮”以及标签中的一些文本，但是它使您了解如何使复选框不可见并在其后面绘制任何内容。

此解决方案也可能适合单选按钮。

以下内容可在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 text

推荐阅读

• 程序员

  使用RSpec/FactoryGirl设置嵌套关联的最佳方法

  如何解决《使用RSpec/FactoryGirl设置嵌套关联的最佳方法》经验，为你挑选了0个好方法。 ... [详细]
• 程序员

  亚马逊linux AMI与Ubuntu

  如何解决《亚马逊linuxAMI与Ubuntu》经验，为你挑选了1个好方法。 ... [详细]
• 程序员

  redux vs this.state in native native

  如何解决《reduxvsthis.stateinnativenative》经验，为你挑选了1个好方法。 ... [详细]
• 程序员

  Symfony 2.8/3.0升级:如何处理带有可变参数的表单类型？

  如何解决《Symfony2.8/3.0升级:如何处理带有可变参数的表单类型？》经验，为你挑选了0个好方法。 ... [详细]
• 程序员

  从不同列中获取绝对值的最大值并过滤掉NaN Python

  如何解决《从不同列中获取绝对值的最大值并过滤掉NaNPython》经验，为你挑选了1个好方法。 ... [详细]
• 程序员

  在ASP.NET 5中使用MimeMapping(vNext)

  

  如何解决《在ASP.NET5中使用MimeMapping(vNext)》经验，为你挑选了2个好方法。 ... [详细]
• 程序员

  这些向量定义是"常量初始化"吗？

  如何解决《这些向量定义是"常量初始化"吗？》经验，为你挑选了1个好方法。 ... [详细]
• 程序员

  如何在angularJS控制器中编写Switch语句

  

  如何解决《如何在angularJS控制器中编写Switch语句》经验，为你挑选了1个好方法。 ... [详细]
• 程序员

  在marklogic中搜索特殊字符

  如何解决《在marklogic中搜索特殊字符》经验，为你挑选了1个好方法。 ... [详细]
• 程序员

  如何在Google Maps JS API中制作虚线弯曲折线？

  

  如何解决《如何在GoogleMapsJSAPI中制作虚线弯曲折线？》经验，为你挑选了1个好方法。 ... [详细]
• 程序员

  为什么C# - > CIL在每条指令上都有标签？

  如何解决《为什么C#->CIL在每条指令上都有标签？》经验，为你挑选了2个好方法。 ... [详细]
• 程序员

  最后针对所有目标链接库

  如何解决《最后针对所有目标链接库》经验，为你挑选了1个好方法。 ... [详细]
• 程序员

  ASP.NET 5 vNext依赖注入(RoleManager)

  如何解决《ASP.NET5vNext依赖注入(RoleManager)》经验，为你挑选了1个好方法。 ... [详细]
• 程序员

  必须调用超类'UITableViewHeaderFooterView'的指定初始化程序

  如何解决《必须调用超类'UITableViewHeaderFooterView'的指定初始化程序》经验，为你挑选了1个好方法。 ... [详细]
• 程序员

  C程序以友好数字算法返回-1073741819

  如何解决《C程序以友好数字算法返回-1073741819》经验，为你挑选了1个好方法。 ... [详细]
• 程序员

  DateField'str'对象没有属性'year'

  如何解决《DateField'str'对象没有属性'year'》经验，为你挑选了1个好方法。 ... [详细]
• 程序员

  升级到Windows 10后如何恢复Anaconda的快捷方式

  如何解决《升级到Windows10后如何恢复Anaconda的快捷方式》经验，为你挑选了2个好方法。 ... [详细]
• 程序员

  没有使用iTunes Connect Access的帐户

  如何解决《没有使用iTunesConnectAccess的帐户》经验，为你挑选了2个好方法。 ... [详细]
• 程序员

  Sencha touch vs Ionic框架的优点和缺点

  如何解决《SenchatouchvsIonic框架的优点和缺点》经验，为你挑选了1个好方法。 ... [详细]
• 程序员

  org/sonar/api/utils/SonarException:不支持的major.minor版本51.0

  如何解决《org/sonar/api/utils/SonarException:不支持的major.minor版本51.0》经验，为你挑选了1个好方法。 ... [详细]

吐了个 "CAO" !

吐个槽吧,看都看了

会员登录 | 用户注册

周扒pi

这个屌丝很懒，什么也没留下！

关注作者

Tags | 热门标签

• actionscrip
• bash
• c#
• c++
• c语言
• erlang
• flutter
• go
• golang
• java
• javascript
• lua
• node.js
• perl
• php
• python
• scala
• typescript

RankList | 热门文章

• 1通过PInvoke"Hello World"
• 2美丽的汤元内容标记
• 3随机分类的数字到变量
• 4iOS 9自定义转换 - 未调用animationControllerForDismissedController
• 5将JSON反序列化为对象C#
• 6d3访问分组条形图中的嵌套数据
• 7Dynamics CRM 2013图表DrillDown排序
• 8如何在Visual Studio 2015中切换已登录的用户？
• 9是不是可以为ForkJoinPool提供线程库或名称模式？
• 10Flask:如何在蓝图中的每个路径之前运行方法？
• 11Textarea字段在提交时返回空
• 12如何在OSx更新后修复损坏的python 2.7.11
• 13如何使用HTML,CSS和JS制作基于音频标签的自定义音乐播放器
• 14在嵌入代码和非嵌入代码之间维护单个代码库
• 15我们可以直接将Parquet文件加载到Hive吗？
• 16如何在app进入前台之前准备UI更新
• 17如何在Ipython(py 2.7)笔记本中更改markdown单元格的字体大小和颜色
• 18Django Queryset过滤列表中的参数
• 19Lua coroutines - setjmp longjmp clobbering？
• 20主持人是否知道MVP模式中的活动/上下文是个坏主意？