How do you make an input field opacity not effect the text color inside it?

Question

I have a dark/black background image and a white input field. I gave the input field an opacity of 50% and I want the text/value to be solid white(#fff). BUT when I apply th

Answer 1

The problem is that you are changing the opacity on the entire element. As such, all child elements strictly inherit the transparent properties.

There are a few things you can do.

1. You could target only the background and set it to an RGBA value:

   background: rgba(255, 255, 255, 0.5);
   

   This wont work in IE8 and before, so you can use a workaround using linear gradient filters:

   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#80ffffff',GradientType=0 );
   

   You will notice that the first 2 hexadecimal places are #80. This is not a mistake and is not a decimal value. Hexadecimal is base 16, this makes #80 the median point therefore setting your opacity to 50%. It's a little confusing, I know!

2. You could remove styling from the input field and, instead, add a wrapper around your input fields and style that instead.

3. You could use a semi-transparent PNG as the background image and set it to repeat.