Html 如何更改复选框'；CSS中的边框样式？

如何更改复选框（输入）边框的样式？我在上面加了

border:1px solid#1e5180

，但在FireFox 3.5中，什么都没发生

将其放在div中，并在div中添加边框

如果在任何浏览器中发生什么事情，我都会感到惊讶。这是浏览器不允许您设置太多样式的优秀表单元素之一，人们通常会尝试用javascript替换它，这样他们就可以设置/编码一些外观和行为类似于复选框的内容。

设置复选框样式（以及该内容的许多其他输入元素）如果你想彻底改变视觉外观，纯css是不可能的

---

最好的办法是实现类似does的功能，它实际上用图像替换输入，并对其应用javascript行为来模拟复选框（或其他元素）

对于Firefox、Chrome和Safari，什么都不会发生

对于IE，边框应用于复选框之外（而不是作为复选框的一部分），复选框中的“花式”着色效果消失（显示为老式复选框）

对于Opera来说，边框样式实际上是在复选框元素上应用边框。
Opera也比其他浏览器更好地处理复选框上的其他样式：颜色应用为勾选颜色，背景颜色应用为复选框内的背景颜色（即应用背景，就好像复选框在带有背景的

中一样）

结论 最简单的解决方案是像其他人建议的那样，将复选框包装在

中。
如果您想完全控制外观，您必须采用高级图像/javascript方法，这也是其他人的意思。

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

您应该使用

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

---

然后去掉默认复选框“图像/样式”，并可以对其进行样式设置。无论如何，Firefox中仍然会有边框

我建议使用“大纲”而不是“边框”。例如：

大纲：1px固体#1e5180

我知道我已经过时了。。但一个小的解决方法是将复选框放在标签标签内，然后使用边框设置标签样式：

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

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

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

---

不，您仍然无法设置复选框本身的样式，但我（最终）想出了如何设置幻觉样式，同时保持单击复选框的功能。这意味着您可以在光标不完全静止的情况下切换它，而无需冒选择文本或触发拖放的风险

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

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

以下内容适用于IE9、FF30.0和Chrome 40.0.2214.91，只是一个基本示例。您仍然可以将其与背景图像和伪元素结合使用

标签{
显示：内联块；
位置：相对；/*复选框绝对定位需要*/
背景色：#eee；
填充：.5rem；
边框：1px实心#000；
边界半径：.375rem；
字体系列：“信使新”；
字号：1rem；
线高：1rem；
}
标签>输入[type=“checkbox”]{
显示：块；
位置：绝对；/*将其从流中移除*/
宽度：100%；
身高：100%；
边距：-.5rem；/*负片标签的填充物，以覆盖“按钮”*/
光标：指针；
不透明度：0；/*使其透明*/
z-index:666；/*将其放在所有其他内容之上*/
}
标签>输入[type=“checkbox”]+span{
显示：内联块；
宽度：1em；
高度：1公厘；
边框：1px实心#000；
保证金权利：.5rem；
}
标签>输入[type=“checkbox”]：选中+span{
背景色：#666；
}

标签文本

这是一个纯CSS（无图像）跨浏览器解决方案，基于Martin的自定义复选框和带有CSS3链接的单选按钮：

下面是一个JSFIDLE：

我已在以下浏览器上对此进行了测试：

• 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）

标签，
输入[type=“radio”]+span，
输入[type=“radio”]+span:：before，
标签，
输入[type=“checkbox”]+span，
输入[type=“checkbox”]+span:：before
{
显示：内联块；
垂直对齐：中间对齐；
}
标签*，
标签*
{
光标：指针；
}
输入[type=“radio”]，
输入[type=“checkbox”]
{
不透明度：0；
位置：绝对位置；
}
输入[type=“radio”]+span，
输入[type=“checkbox”]+span
{
字体：普通11px/14px Arial，无衬线；
颜色：#333；
}
标签：悬停范围：：之前，
标签：悬停span:：before
{
-moz盒阴影：0 0 2px#ccc；
-网络工具包盒阴影：0 0 2px#ccc；
盒影：0 0 2px#ccc；
}
标签：悬停跨度，
标签：悬停跨度
{
颜色：#000；
}
输入[type=“radio”]+span:：before，
输入[type=“checkbox”]+span:：before
{
内容：“；
宽度：12px；
高度：12px；
利润率：0.4px 0；
边框：实心1px#a8a8；
线高：14px；
文本对齐：居中；
-moz边界半径：100%；
-webkit边界半径：100%；
边界半径：100%；
背景：#f6f6f6；
背景：-莫兹径向梯度（#f6f6f6，#dfdfdf）；
背景：-webkit径向梯度（#f6f6f6，#dfdfdf）；
背景：-ms径向梯度（#f6f6f6，#dfdfdf）；
背景：-o-径向梯度（#f6f6f6，#dfdfdf）；
背景：径向梯度（f6f6f6，#dfdfdf）；
}
输入[type=“radio”]：选中+span:：之前，
输入[type=“checkbox”]：选中+span:：before
{
颜色：#666；
}
输入[type=“radio”]：dis
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 */
}

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