Firefox：过渡占位符不透明度 [英] Firefox: Transition placeholder opacity

问题描述

  
 
 >< input type =textplaceholder =some cool text/> 
 
输入：focus ::  -  moz-placeholder {
 opacity：0.1; 
} 
 input ::  -  moz-placeholder {
 opacity：1; 
 transition：opacity 1s; 
} 
 input ::  -  moz-placeholder {
 opacity：1; 
} 
 input：focus ::  -  webkit-input-placeholder {
 opacity：0.1; 
} 
  

小提琴

在Chrome中可以正常工作，但在FF中不行。
占位符按预期更改焦点上的不透明度，但不会出现1s转换。它也肯定不工作在IE

编辑：显然它的一个bug在最新版本的FF（20.0.1）

解决方案

如何做呢？不要使用 opacity ，切换颜色深浅

演示

 < input type =textplaceholder =some cool text/> 
 
 input [type = text]： -  moz-placeholder {
 color：＃000; 
 transition：color 1s; 
} 
 
 input [type = text]：focus：-moz-placeholder {
 color：#aaa; 
} 
 
 input [type = text] ::  -  webkit-input-placeholder {
 color：＃000; 
 transition：color 1s; 
} 
 
 input [type = text]：focus ::  -  webkit-input-placeholder {
 color：#aaa; 
} 
  

当然可以使用 opacity 如果您愿意，但是您可以自己查看结果并决定什么更好， opacity demo

注意：使用 :: moz-placeholder 以支持+19 Ver

I wanted to make input placeholder fade smoothly on focus using transition, but can't get it to work in FF.

<input type="text" placeholder="some cool text"/>

input:focus::-moz-placeholder {
    opacity: 0.1;
}
input::-moz-placeholder {
    opacity: 1;
    transition: opacity 1s;
}
input::-moz-placeholder {
    opacity: 1;
}
input:focus::-webkit-input-placeholder {
     opacity: 0.1;
}

Fiddle

Works fine in Chrome, but not in FF. The placeholder changes opacity on focus as intended, but 1s transition doesn't appear. It also definitely doesn't work in IE

EDIT: Apparently its a bug in the latest version of FF (20.0.1)

解决方案

How about doing it like this? Instead of using opacity, switch the color shades

Demo

<input type="text" placeholder="some cool text"/>

input[type=text]:-moz-placeholder {
color: #000;
transition: color 1s;
}

input[type=text]:focus:-moz-placeholder {
    color: #aaa;
}

input[type=text]::-webkit-input-placeholder {
    color: #000;
    transition: color 1s;
}

input[type=text]:focus::-webkit-input-placeholder {
    color: #aaa;
}

Certainly you can use opacity if you want but you can see the result yourself and decide what's better for you, opacity demo

Note: Use ::-moz-placeholder to support +19 Ver

这篇关于Firefox：过渡占位符不透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！