17

我正在尝试使用 CSS3 制作自定义复选框，这在 Chrome 上运行良好。在 Firefox 上……没那么多。

编辑：它似乎在 Firefox 37 上运行良好。

下面的答案仍然是相关的，但从 2013 年中期开始的风格相关问题已经解决。

此处未提及 IE 支持，但欢迎对其进行编辑/回答。

演示

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

注意：为了简洁起见，我删除了供应商前缀和用户选择之类的东西。完整的代码在笔中。

我需要进行哪些更改才能使其在 Firefox 上看起来与在 Chrome 上一样？

期望：

镀铬所需的外观

不需要：

火狐看不好

4

4 回答 4

13

您可以通过添加此属性为专门用于 Mozilla 浏览器的复选框启用自定义样式，它对我有用。

-moz-appearance:initial

于 2019-10-21T05:31:21.173 回答
9

我设法尽可能地修复它（如果存在，我仍然喜欢更好的解决方案）。我将所有选择器从

input[type=checkbox]::after

至

input[type=checkbox] + label::after

缺点：

  • 需要标签

但：

  • HTML 要求输入元素有标签

结论：

  • 只对无效的 HTML 不利
于 2013-08-23T12:04:03.573 回答
2

问题在于，:after从::after技术上讲，创建一个元素作为伪选择器应用到的元素的最后一个子元素。Firefox 不喜欢在其复选框内创建子级。这实际上是一个更大的话题的一部分，即被替换的元素。

您将看到与:before和::before伪元素在复选框上不起作用的相同问题，因为它们会将元素创建为被选择元素中的第一个子元素。

于 2016-11-01T18:46:55.487 回答
2

技术上不需要 LABEL，但确实需要控制标记以确保在复选框之后立即有一个可定位的兄弟。

IE

input[type=checkbox] + span::after{
  display:block;
  width:50px;
  height:50px;
  background:yellow;
  display:block;

}

input[type=checkbox]:checked + span::after{
  display:block;
  width:50px;
  height:50px;
  background:yellow;
  display:block;

}
    <input type="checkbox"></input>
    <span class="targetMe"></span>

如上所述使用兄弟选择器和 :after 元素定位跨度。

不妨在这一点上贴上标签……：P

于 2016-04-18T04:24:23.300 回答