Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
I am creating a web page that contains an input field element. The input field element is inside of a div who’s background is blue. I want the input field to be white, but also transparent so that part of the blue background in the div is visible. I also would like white text in the field as well. How do I code this in CSS so that it is compatible with all browsers?
I’m not totally clear which browsers you’re looking to support – if you mean just all the modern browsers then you wouldn’t be particularly concerned about compatibility – but anyways:
background-color: transparent;should work just about anywhere.If you want an entire element to be partially opaque then you can use
filterfor IE8 andopacityfor everything else, as shown here.If you want to be able to set
background-color(or any other colour) to a partial-opacity colour, you can use rgba, eg:color: rgba(255,0,0,0.5);. More info + support tables here here. Spoiler: it doesn’t work in IE8.