Question

我想创建一个输入透明的简单表单，但是当我设置输入的不透明度时，占位符文本也是“opacified”。我怎么能摆脱它？我希望我的占位符文本是纯白色的。

我知道这似乎是一个dummie问题，但我多次搜索而没有找到解决方案......

图形最终愿望：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）值，其中最后一个值为不透明度。

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;
}

通过在元素上设置opacity，任何子项或相关的渲染项（例如文本等）都将受其约束。使用rgba值可以定位具有不透明度级别的特定CSS属性（只要它们允许颜色设置）

Answer 2

将此css用于Firefox

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

现在可以找到其他浏览器。

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

2 个答案:

Revised Fiddle