logo标签列表

更改占位符的不透明度

htmlcssformsinput
12

我正在这样更改输入框的不透明度...

<body>
    <form>
        <input type="text" name="fname" placeholder="First name"><br>
    </form>
</body>

body{background:black}
input{height:30px;opacity:.5;}

http://jsfiddle.net/hbakrvnv/

这个方法可以工作，但会改变占位符的透明度。如何使占位符文本保持为白色，放在50%不透明度的输入框上方？

1
请查看此问题的答案。它解释了如何使用CSS设置占位符颜色：https://dev59.com/QHE85IYBdhLWcg3wyGt_ - Kalel Wade
我想要改变的不是颜色，而是透明度。 - fightstarr20
链接中已包含此内容。 - Kalel Wade
回答已更新，抱歉之前有错误，但现在已经修复了。同时添加了代码片段和JSFiddle链接。 - morha13
2个回答
13

您可以在 WebKit 浏览器中使用此方法：

body{background:black}
input{height:30px;opacity:.5;}
input::-webkit-input-placeholder {
     color: black; /*Change the placeholder color*/
     opacity: 0.5; /*Change the opacity between 0 and 1*/
}
<body>
    <form>
        <input type="text" name="fname" placeholder="First name"><br>
    </form>
</body>

如果您使用的是IE10（或更高版本），则无法更改不透明度，正如在Internet Explorer Dev Center中描述的那样：点击这里

JSFiddle：http://jsfiddle.net/hbakrvnv/4/

编辑：已更正CSS错误

5
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接