Question

我正在使用这种样式来更改复选框的外观：

th .checkbox label::before,th .checkbox label::before {
      content: "";
      display: inline-block;
      position: absolute;
      width: 17px;
      height: 17px;
      left: -20px;
      border: 1px solid #cccccc;
      border-radius: 3px;
      background-color: #fff;
      -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
      -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
      transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    }
th .checkbox label::after {
      display: inline-block;
      position: absolute;
      width: 16px;
      height: 16px;
      left: -21px;
      top: 0;
      padding-left: 3px;
      padding-top: 1px;
      font-size: 11px;
      color: #555555;
    }

这对于之前和之后非常有效，但是chrome中的中间样式没有正确的位置。所以我尝试了：

th .checkbox label::indeterminate {
  display: inline-block;
  position: absolute;
  width: 16px;
  height: 16px;
  left: -20px;
  top: 0;
  padding-left: 3px;
  padding-top: 1px;
  font-size: 11px;
  color: #555555;
}

但是它不起作用:(。我该如何解决这个问题，并至少赋予不确定的left: -21px;样式。

提前谢谢！

Answer 1

indeterminate是伪类，因此它以:开头，而before和after是伪元素然后以::

开头

th .checkbox label:indeterminate {
  display: inline-block;
  position: absolute;
  width: 16px;
  height: 16px;
  left: -20px;
  top: 0;
  padding-left: 3px;
  padding-top: 1px;
  font-size: 11px;
  color: #555555;
}

请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate

和https://developer.mozilla.org/en-US/docs/Web/CSS/::before

标签样式为复选框的不确定css样式

1 个答案: