css - 不透明度输入表单搞砸了我的占位符颜色

Question

我想制作一个简单的表单，其中输入是透明的，但是当我设置输入的不透明度时，占位符文本也是“不透明的”。我怎样才能摆脱它？我希望我的占位符文本为纯白色。

我知道这看起来像是一个傻瓜问题，但我搜索了多次都没有找到解决方案...

图形最终愿望:http://cl.ly/image/1W0q1R0X2n0m/Image%202014-05-15%20at%2012.15.06%20PM.png

JSFIDDLE:http://jsfiddle.net/v35kJ/

HTML

<form action="formulaire.php" method="get">
<label for="email"><img id="fleche" src="img/fleche.png" alt=""></label>
<div id="mail">
<input type="email" name="email" id="email" placeholder="Entrez votre e-mail" required>
<input id="submit" type="submit" value="Restons en contact">
</div>
</form>

CSS

#mail #email{
height: 30px;
width: 200px;
background-color: white;
opacity: 0.2;
color: white;
font-size: 18px;
font-family: HNThin;
padding-left: 10px;
border: none;
border-radius: 4px 0px 0px 4px;
margin: 0;
}

Answer 1

为背景使用 rgba(红、绿、蓝、alpha)值，其中最后一个值是不透明度。

例如背景:rgba(255,255,255,0.2);

Revised Fiddle

CSS

#mail #email{
   height: 30px;
   width: 200px;
   opacity: 0.2;
   background-color:rgba(255,255,255,0.2);
   font-size: 18px;
   font-family: HNThin;
   padding-left: 10px;
   border: none;
   border-radius: 4px 0px 0px 4px;
   margin: 0;
}

通过在元素上设置opacity，它、任何子元素或相关渲染元素(例如文本等)都将受制于它。 rgba 值让您可以针对具有不透明度级别的特定 CSS 属性(只要它们允许颜色设置)