Question

回答一些问题我试图展示如何在没有JavaScript / jQuery的情况下使用普通CSS在文本输入占位符上进行动画处理。我将:not(:focus)伪类与input-placeholder一起使用，并将闪烁的动画放入其中。在Chrome，IE和Opera上它完美运行，但在Firefox上却失败了。

如果我尝试设置其他属性，例如color:red它可以正常工作，那么我确信我的代码在模糊时正确访问了占位符。我也在一个带有文本的简单div上尝试了相同的动画，它也有效。因此，似乎Firefox特别没有为占位符设置动画。我错过了什么，或者只是一个Firefox错误？

这是我的代码：

#theInput:not(:focus)::-webkit-input-placeholder {
  -webkit-animation: simple-blink-text 1s step-start infinite;
}
#theInput:not(:focus)::-moz-placeholder {
  color: red;
  animation: simple-blink-text 1s step-start infinite;
}
#theInput:not(:focus):-ms-input-placeholder {
  animation: simple-blink-text 1s step-start infinite;
}
@-webkit-keyframes simple-blink-text {
  0% { color: black }
  25% { color: transparent }
  100% { color: black }
}
@keyframes simple-blink-text {
  0% { color: black }
  25% { color: transparent }
  100% { color: black }
}

<input type="text" id="theInput" placeholder="This field is required!">

和CodePen

中的相同

Answer 1

好像::-moz-placeholder在Firefox中没有动画效果。尝试将@-moz-document url-prefix()用于FireFox：

#theInput:not(:focus)::-webkit-input-placeholder {
  -webkit-animation: simple-blink-text 1s step-start infinite;
}
@-moz-document url-prefix() {
  #theInput:not(:focus) {
    animation: simple-blink-text 1s step-start infinite;
  }
}
#theInput:not(:focus):-ms-input-placeholder {
  animation: simple-blink-text 1s step-start infinite;
}
@-webkit-keyframes simple-blink-text {
  0% { color: black }
  25% { color: transparent }
  100% { color: black }
}
@keyframes simple-blink-text {
  0% { color: black }
  25% { color: transparent }
  100% { color: black }
}

Firefox无法为输入文本占位符设置动画

1 个答案: