Change placeholder opacity
css, forms, html, input
Solution
You can use this method in WebKit browsers:
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>
If you are using IE10 (or higher) it is not possible to change the opacity, as you can see described in Internet Explorer Dev Center: Click Here
JSFiddle: http://jsfiddle.net/hbakrvnv/4/
EDIT: Fixed CSS mistake
Problem
I am changing the opacity of an input field like this... ``` <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/ This works but it also changes the opacity of the placeholder. How can I keep the placeholder text as white on top of the 50% opacity input field?