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 the opacity it effects both the background of the input element and the text. How to I only change the background of the input field?

Answer 1

For that you could use background-color: rgba(0, 0, 0, 0.5). The first three numbers are the background color in rgb (red, green, blue) format and the fourth number is the opacity level on a scale from 0 to 1.

Answer 2

From what you say, you only want the background to be affected.

For backgrounds to be (partially) transarent, you have to use a

a) PNG background

or

b) a RGBa background- see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgba()

Like so: background:rgba(0,0,0,0.2);

This is not supported in IE8 and below.

Answer 3

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.

Answer 4

Why not simply make a half-transparent png and use that as background image instead of setting the input opacity? Or if you don't have to support IE8- you can also use rgba().