Question

我在“多个”模式下有一个选择框，可以异步获取其数据。在等待数据时，我希望选择框显示一个微调器。我在Chrome，Chromium和Edge下运行了以下代码，但在Firefox下（在52和57上测试），该框保持纯白色。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .multiselect {
      width: 300px;
      height: 200px;
      position: relative;
    }
    .loading:before, .loading:after{
      content: "";
      position: absolute;
      bottom: 0; left: 0; right: 0; top: 0;
      z-index: 1000;
      pointer-events: none;
      overflow: hidden;
    }
    .loading:before {
      width:100%; height:100%;
      background-color: rgba(211, 211, 211, .8);
    }
    .loading:after {
      margin: auto;
      width: 32px; height: 32px;
      border: 4px solid #F37324;
      border-left-color: transparent;
      border-top-color: transparent;
      border-radius: 50%;
      animation: spin 600ms infinite linear;
    }
    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(359deg); }
    }
  </style>
</head>
<body>
  <div>
    <select class="multiselect loading" multiple></select>
  </div>
</body>
</html>

我找到了一个工具（https://www.browseemall.com/Compatibility/ValidateCSS）告诉我这个CSS与FF37兼容。

我尝试将特定于供应商的规则-moz-添加到@keyframes，转换和动画以及使用z-index和内容但到目前为止没有成功。

Answer 1

问题不在动画中。这是因为在select中使用了伪元素。

在select中使用伪元素之后和之前是不好的做法。你应该添加一个包装div和样式div。

problem with <select> and :after with CSS in WebKit

Answer 2

select在浏览器之间的处理方式不同。最好避免使用伪元素。在您的情况下，伪元素正在Chrome中应用，但在Firefox中不适用。

作为替代方案，将伪元素应用于包装器。

fiddle

.select-wrapper {
  position: relative;
  width: 300px;
  height: 200px;
}

.loading {
  width: 300px;
  height: 200px;
}

.select-wrapper:before,
.select-wrapper:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1000;
  pointer-events: none;
  overflow: hidden;
}

.select-wrapper:before {
  width: 100%;
  height: 100%;
  background-color: rgba(211, 211, 211, .8);
}

.select-wrapper:after {
  margin: auto;
  width: 32px;
  height: 32px;
  border: 4px solid #F37324;
  border-left-color: transparent;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 600ms infinite linear;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

<div class="select-wrapper">
  <select class="multiselect loading" multiple></select>
</div>

CSS动画在Firefox中不起作用

2 个答案: