Change placeholder opacity

Question

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?

https://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css Check the answer on this question. It explains setting the placeholder color — Kalel Wade, Feb 20 '15 at 19:15
Answer updated, sorry I had a mistake but now it's working. also added code snippet and JSFiddle. — morha13, Feb 20 '15 at 19:32

morha13 · Answer 1 · 2015-02-20T19:31:35.580

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

score 5 · Answer 2 · answered Mar 23 '22 at 19:16

Since ~2017 you can use the ::placeholder CSS pseudo-element like so

::placeholder {
  color: green;
}

.force-opaque::placeholder {
  opacity: 1;
}

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder
CanIUse: https://caniuse.com/css-placeholder

Change placeholder opacity

2 Answers2