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

前端 未结 4 386
孤独总比滥情好
孤独总比滥情好 2021-01-11 09:51

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

相关标签:
4条回答
  • 2021-01-11 10:08

    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.

    0 讨论(0)
  • 2021-01-11 10:12

    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.

    0 讨论(0)
  • 2021-01-11 10:18

    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.

    0 讨论(0)
  • 2021-01-11 10:20

    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().

    0 讨论(0)
提交回复
热议问题