Question

我已经尝试了解决方案here和其他重复的here，但这些问题已有4年的历史，并且解决方案不适用于较新版本的Firefox。此外，后者中链接的bug具有以下状态：VERIFIED FIXED。

我尝试过只使用与占位符前缀匹配的转换前缀以及没有运气的转换回退。例如：

&::-moz-placeholder {
    -moz-transition: $transition;
    transition: $transition;
}

下面的内容适用于Chrome，但不适用于Firefox或Edge。不透明度变化很好，但没有过渡。我是否遗漏了支持Firefox和Edge占位符转换的内容？

@mixin transition($transition...) {
    -webkit-transition: $transition;
    -moz-transition: $transition;
    -o-transition: $transition;
    transition: $transition;
}

@mixin placeholderOpacity($opacity) {
    &:-moz-placeholder {opacity: $opacity}
    &:-ms-input-placeholder  {opacity: $opacity}
    &::-webkit-input-placeholder {opacity: $opacity}
    &::-moz-placeholder {opacity: $opacity}
    &::placeholder  {opacity: $opacity}
}

@mixin placeholderTransition($transition) {
    &:-moz-placeholder {@include transition($transition);}
    &:-ms-input-placeholder  {@include transition($transition);}
    &::-webkit-input-placeholder {@include transition($transition);}
    &::-moz-placeholder {@include transition($transition);}
    &::placeholder  {@include transition($transition);}
}

input {
    @include placeholderOpacity(0);
    @include placeholderTransition(opacity 500ms ease-in-out);
}

input:focus {
    @include placeholderOpacity(1);
}

Answer 1

由于没有真正的跨浏览器解决方案来设置样式和动画占位符，我决定从我的另一个答案发布更新版本，其中这个版本同时具有标签，占位符和必需的星号。

我添加了一个只有一个目的的小脚本，用于将input字段中写入的内容复制到其属性 value。

然后，只需使用属性选择器[attribute="value"]（我认为大多数用户希望使用它的方式），就可以单独使用CSS作为实际样式和动画。

(function(pls) {
  /* run this script when page loaded */
  window.addEventListener('load', function() {
    /* find and iterate all "input placeholder" elements */
    pls = document.querySelectorAll('.placeholder input');
    for (var i = 0; i < pls.length; i++) {
      /* attach a handler to replicate input value */
      pls[i].addEventListener('input', function() {
        this.setAttribute('value', this.value);
      })
    }
  })
})();

.placeholder {
  position: relative;
  padding-top: 15px;
}
.placeholder + .placeholder {
  margin-top: 10px;
}
.placeholder label {
  position: absolute;
  left: 5px;
  width: 100%;
  top: calc(50.5% + 7.5px);
  transform: translateY(-50.5%);
  pointer-events: none;
  font-size: 16px;
  line-height: 16px;
}
.placeholder label::before,
.placeholder label span {  
  position: relative;
  top: 0;
  transition: top .5s;
}

/* the label text + asterisk */
.placeholder input + label::before {
  content: attr(data-text) ' '; 
  color: black;
}
.placeholder label span {
  color: red;
}
.placeholder input:not([required]) + label span {
  display: none;
}
.placeholder input:not([value=""]) + label::before,
.placeholder input:focus + label::before,
.placeholder input:not([value=""]) + label span,
.placeholder input:focus + label span {
  top: -22px;
}

/* the placeholder text */
.placeholder input + label::after {
  content: attr(data-placeholder); 
  position: absolute;
  left: 0; top: 0;
  color: gray;
  opacity: 0;
  transition: opacity .5s .2s;
}
.placeholder input:focus + label::after {
  opacity:  1;
}
.placeholder input:not([value=""]) + label::after {
  opacity:  0;
  transition: opacity .2s;
}

<div class="placeholder">
  <input type="text" name="name" value="">
  <label data-text="Name" data-placeholder="Add your name"><span>*</span></label>
</div>
<div class="placeholder">
  <input type="text" name="mail" value="" required>
  <label data-text="Email" data-placeholder="Add your email address"><span>*</span></label>
</div>

Firefox + Edge输入占位符不透明度转换

1 个答案: