Opacity input form screw up my placeholder color

Question

I would like to make a simple form where the input is transparent, but when I set the opacity of the input, the placeholder text is ALSO "opacified". How could I get rid of it? I want my placeholder text to be plain white.

I know it seems like a dummie issue but I search multiple times without finding solution...

The graphic final desire: 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

Use a rgba (red, green, blue, alpha) value for the background, where the last value is opacity.

e.g. background: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;
}

By setting opacity on an element, it, any children or related rendered items (such as text etc) will be subject to it. rgba values let you target specific CSS properties with opacity levels (so long as they allow for color setting)

Answer 2

Once use this css for Firefox

input::-moz-placeholder {
    color: black;
}

now find out for other browsers.