Help with a form opacity please

[StudiousArgyle]

I want the form background to be mostly transparent, but the inputs to be opaque. But that’s not happening

{
  background-color:rgba(235,235,235,30);
  border-radius:30px;
  opacity:0.4;
  width:300px;
  padding:20px;
  margin:auto;
}
input[type="text"], input[type ="number"]
{
  display:flex;
  opacity:1;
  flex-direction:center;
  margin:auto;
  width:200px;
  border-radius:83px;
  
}

[skamat]

What is the selector you used to style the form? For the textboxes, you used the attribute selector. But for the form no selector is visible before the opening { here:

[StudiousArgyle]

#survey-form

here’s the project link, if it helps
https://codepen.io/juanito-frio/pen/GRyLzOb

[lasjorg]

If you set opacity on the parent container it affects the child elements.

You can use rgba to give the background color some transparency.

#survey-form {
  background-color: rgba(235, 235, 235, 0.6);
  border-radius: 30px;
  width: 300px;
  padding: 20px;
  margin: auto;
}