Question

我正在改变像这样的输入字段的不透明度......

<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％不透明度输入字段的顶部将占位符文本保持为白色？

Answer 1

您可以在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开发人员中心所述：Click Here

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

编辑：修正了CSS错误

更改占位符不透明度

1 个答案: