Question

我有一个相应的样式复选框。像这样：

input[type=checkbox] {
  transform: scale(1.3);
}

input[type=checkbox] {
  width: 30px;
  height: 30px;
  margin-right: 15px;
  cursor: pointer;
  font-size: 17px;
  visibility: hidden;
}

input[type=checkbox]:after {
  content: " ";
  background-color: rgba(224, 214, 214, 0.877);
  display: inline-block;
  margin-left: 10px;
  padding-bottom: 5px;
  color: #fff;
  width: 22px;
  height: 25px;
  visibility: visible;
  border: 1px solid transparent;
  padding-left: 3px;
  border-radius: 5px;
}

input[type=checkbox]:checked:after {
  content: "\2714";
  padding: -5px;
  background: red;
  font-weight: bold;
}

<input type="checkbox" [(ngModel)]="Option1" />
<p>Option1</p>

我对此进行了测试，它在Chrome和Opera中有效，但我忘了查看Firefox。现在我看到复选框根本没有出现在那里。我理解这是一个使用问题：在复选框后，但我该如何解决这个问题？这样在浏览器上显示相同的复选框样式？我不知道该怎么做才能保持设计。谢谢。

Answer 1

阅读这些specifications

：before和：after应该只对可以充当a的元素起作用   内容容器。不能包含任何内容   不支持那些伪元素。 Chrome支持，因为它不支持   按照规范

但是，您可以使用<span>标记旁边的input标记来实现此目的，如下所示。它也适用于firefox

＆＃13;

body {
  font: 13px Verdana;
}

label {
  position: relative;
  display: inline-block;
  text-align: center;
}

label span {
  display: block;
  margin-top: 10px;
  cursor: pointer;
}

input[type=checkbox] {
  width: 30px;
  height: 30px;
  cursor: pointer;
  margin: 0;
  opacity: 0;
}

input[type=checkbox]+span:after {
  content: "";
  background-color: rgba(224, 214, 214, 0.877);
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 5px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  line-height: 30px;
}

input[type=checkbox]:checked+span:after {
  content: "\2714";
  background: red;
}

＆＃13;

<label>
<input type="checkbox" [(ngModel)]="Option1" />
<span>Option1</span>
</label>

＆＃13;

样式的CSS不会出现在Firefox中

1 个答案: