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

html css input opacity
Jordan Simon picture Jordan Simon · Sep 10, 2013 · Viewed 31.5k times · Source

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

Beniamin Szabo picture Beniamin Szabo · Sep 10, 2013

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.

Related questions

Is there any way to change input type="date" format?

I'm working with HTML5 elements on my webpage. By default input type="date" shows date as YYYY-MM-DD. The question is, is it possible to change its format to something like: DD-MM-YYYY?

Read More
Put icon inside input element in a form

How do I put an icon inside a form's input element? Live version at: Tidal Force theme

Read More
Can I hide the HTML5 number input’s spin box?

Is there a consistent way across browsers to hide the new spin boxes that some browsers (such as Chrome) render for HTML input of type number? I am looking for a CSS or JavaScript method to prevent the up/down …

Read More