How to stop child elements from becoming transparent when styling is applied to parent element?

Question

when creating a form, is it possible to make the container box (parent element) semi-transparent and not make everything else within the container such as labels and value boxes etc (child elements) also semi-transparent.

Answer 1

No, you cannot: opacity of parent element is necessarly "inherited" by its childs (opacity is rendered when drawing element, after its content was rendered).

However, you can workaround by having a parent container with no opacity set, and two different child branch positionned one over the other with same size: you could have a background branch on wich you apply the opacity level wanted, and the other without be affected by it:

<div id="global-wrapper">
<div id="background"></div>
<div id="content-wrapper">text</div>
</div>

#global-wrapper {
position:relative;
width:200px;
height:200px;
}
#background {
position:absolute;
width:100%;
height:100%;
background:black;
opacity:0.1;
}
#content-wrapper {
line-height:200px;
font-size:32px;
font-weight:bold;
vertical-align:middle;
text-align:center;
color:red;
}

Answer 2

thx for your reply, I'll give it a go :)