自定义复选框在Firefox上失败 [英] Custom Checkboxes Failing on Firefox

问题描述

我想使用CSS3自定义复选框，这在Chrome上运行良好。在Firefox上...不是这么多。

I'm trying to make custom checkboxes with CSS3, which is working great on Chrome. On Firefox... not so much.

编辑：似乎在Firefox 37上正常工作。

下面的答案仍然是相关的，但与2013年中期以来的风格相关问题已解决。

it seems to be working fine on Firefox 37.

The answer below is still relevant, but the style related issues from mid 2013 are resolved.

此处未提及IE支持， /欢迎使用有关的答案。

IE support isn't mentioned here but edits/answers regarding it are welcome.

演示

HTML：

demo

The HTML:

<input type="checkbox" id="first"/>
<label for="first">This is pretty awesome</label>

CSS：

input[type=checkbox] {
  appearance: none;
  background: transparent;
  position: relative;
}
input[type=checkbox]::after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  text-align: center;
  background: #aaa;
  display: block;
  pointer-events: none;
  opacity: 1;
  color: black;
  border: 3px solid black;
}
input[type=checkbox] + label {
  line-height: 48px;
  margin: 0 15px 0 15px;
}
input[type=checkbox]:hover::after {
  content: '';
  background: #32cd32;
  opacity: .3;
}
input[type=checkbox]:checked::after {
  content: '\2713';
  background: #32cd32;
}
input[type=checkbox]:checked:hover::after {
  opacity: 1;
}
input[type=checkbox],
input[type=checkbox]::after {
  width: 48px;
  height: 48px;
  font-size: 46px;
  line-height: 48px;
  vertical-align: middle;
  border-radius: 50%;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

_{注意：我删除了供应商前缀，简洁。}

_{Note: I removed vendor prefixes, and things like user-select for brevity. The full code is in the pen.}

我需要更改哪些内容，使其在Chrome上的显示效果与Chrome上的一样？

What do I need to change to have it look the same on Firefox as it does on Chrome?

需要：

不需要：

推荐答案

我设法修复它尽可能多的似乎可能（我仍然爱一个更好的解决方案，如果存在）。我切换了所有的选择器

I managed to fix it as much as seems possible (I'd still love a better solution, if one exists). I switched all of the selectors from

input[type=checkbox]::after

至

input[type=checkbox] + label::after

下面：

• 需要标签

但是：

• HTML需要输入元素具有标签

结论：

• 仅对无效的HTML有效

这篇关于自定义复选框在Firefox上失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！