html - 更改占位符不透明度

标签 html css forms input

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

<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% 不透明度输入字段顶部保持为白色?

最佳答案

您可以在 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 错误

关于html - 更改占位符不透明度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28636476/

相关文章:

javascript - 单击并拖动多个 div?

javascript确定退出按钮

html - 重置 Bootstrap CSS 属性的最简单方法?

python - 不要提交超过 11 点的时间 :59 pm

asp.net-mvc - 如何处理 ASP.NET MVC 表单中的复选框?

javascript - 如何验证使用 JSON 读取的表单数据?

javascript - "Windows Phone HTML5 App"和 "Javascript Windows Store Project"之间的区别

html - css vh 和 vw,为什么移动方向时 vw 值不改变?

javascript - 如何使用 jquery 将复选框的值追加和删除到 ul li

javascript - outerWidth(true) 连续两次返回不同的值,无需重新加载页面