Menu
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?
451
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
161
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
