How to add opacity to a parent div without applying it to children divs

Question

I added opacity to a wrap I have that makes a background behind input fields I have. I was only wanting the wrap to have the opacity, but it gave it to all of the inputs as well. How can I apply the opacity only to the wrap around the inputs?

I made a fiddle to show somewhat how it looks.

https://jsfiddle.net/ajemyg8x/

I added the opacity to this div:

.registerWrap {
    border-radius: 10px;
    border: 3px solid white;
    width: 45%;
    height: 500px;
    margin: 100px auto 40px auto;
    padding: 40px;
    text-align: center;
    background-color: #282828;
    opacity: 0.9;
    filter: alpha(opacity=90); /* For IE8 and earlier */
}

#wrap {
  background-color: gray;
}
.registerWrap {
  border-radius: 10px;
  border: 3px solid white;
  width: 45%;
  height: 500px;
  margin: 100px auto 40px auto;
  padding: 40px;
  text-align: center;
  background-color: #282828;
  opacity: 0.9;
  filter: alpha(opacity=90);
  /* For IE8 and earlier */
}
.inputbar[type=text] {
  display: block;
  width: 400px;
  margin: 10px auto;
  font-size: 18px;
  padding: 10px;
  -webkit-transition: all 0.40s ease-in-out;
  -moz-transition: all 0.40s ease-in-out;
  -ms-transition: all 0.40s ease-in-out;
  -o-transition: all 0.40s ease-in-out;
  outline: none;
  border: 1px solid #DDDDDD;
}
.inputbar:hover {
  -moz-box-shadow: 0 0 10px #ccc;
  -webkit-box-shadow: 0 0 10px #ccc;
  box-shadow: 0 0 10px #ccc;
}
.inputbar[type=text]:focus {
  border: 1px solid #800000;
  -moz-box-shadow: 0 0 1px 1px rgba(128, 0, 0, 1);
  -webkit-box-shadow: 0 0 1px 1px rgba(128, 0, 0, 1);
  box-shadow: 0 0 1px 1px rgba(128, 0, 0, 1);
}
#registerButton[type=submit] {
  margin: 15px auto;
  width: 425px;
  font-size: 20px;
  font-weight: bold;
  padding: 14px;
  cursor: pointer;
  background-color: #800000;
  border: none;
  color: #FFFFFF;
}
#registerButton[type=submit]:hover {
  -moz-box-shadow: 0 0 10px #ccc;
  -webkit-box-shadow: 0 0 10px #ccc;
  box-shadow: 0 0 10px #ccc;
}

<div id="wrap">
  <div class="registerWrap">
    <form action="" method="POST">
      <input type="text" class="inputbar" name="firstname" placeholder="First Name" required>
      <input type="text" class="inputbar" name="lastname" placeholder="Last Name" required>
      <input type="email" class="inputbaremail" name="email" placeholder="Email" required>
      <input type="tel" class="inputbarphone" name="phone_number" placeholder="Cell Phone Number" required>
      <input type="text" class="inputbar" name="username" placeholder="Username" autocomplete="off" required>
      <input type="password" name="password" placeholder="Password" class="inputbarp" required>
      <input type="password" name="password_again" placeholder="Confirm Password" class="inputbarp" required>
      <label for="registerButton">
        <input id="registerButton" type="submit" name="submit" value="Register">
      </label>
    </form>
  </div>

Answer 1

Setting opacity will affect all the child elements. Instead, you could just set the background color opacity, like so:

background-color: rgba(40, 40, 40, .9); /* last value is opacity */

Answer 2

I have updated your CSS (jsfiddle):

   #wrap {
        background-color: gray;
    }

    .registerWrap {
        border-radius: 10px;
        border: 3px solid white;
        width: 45%;
        height: 500px;
        margin: 100px auto 40px auto;
        padding: 40px;
        text-align: center;
        background-color: #282828;
        opacity: 0.9;
        filter: alpha(opacity=90);
        /* For IE8 and earlier */
    }
        .registerWrap * {
             opacity:1;   
        }
    .inputbar[type=text] {
        display: block;
        width: 400px;
        margin: 10px auto;
        font-size: 18px;
        padding: 10px;
        -webkit-transition: all 0.40s ease-in-out;
        -moz-transition: all 0.40s ease-in-out;
        -ms-transition: all 0.40s ease-in-out;
        -o-transition: all 0.40s ease-in-out;
        outline: none;
        border: 1px solid #DDDDDD;
    }
    .inputbar:hover {
        -moz-box-shadow: 0 0 10px #ccc;
        -webkit-box-shadow: 0 0 10px #ccc;
        box-shadow: 0 0 10px #ccc;
    }
    .inputbar[type=text]:focus {
        border: 1px solid #800000;
        -moz-box-shadow: 0 0 1px 1px rgba(128, 0, 0, 1);
        -webkit-box-shadow: 0 0 1px 1px rgba(128, 0, 0, 1);
        box-shadow: 0 0 1px 1px rgba(128, 0, 0, 1);
    }
    #registerButton[type=submit] {
        margin: 15px auto;
        width: 425px;
        font-size: 20px;
        font-weight: bold;
        padding: 14px;
        cursor: pointer;
        background-color: #800000;
        border: none;
        color: #FFFFFF;
    }
    #registerButton[type=submit]:hover {
        -moz-box-shadow: 0 0 10px #ccc;
        -webkit-box-shadow: 0 0 10px #ccc;
        box-shadow: 0 0 10px #ccc;
    }

I have added:

.registerWrap * {
    opacity:1;   
}

Answer 3

You could actually set a rgba color value for the background-color of the wrap like below. The value rgba(40, 40, 40, 0.9) is nothing but the rgb equivalent of your hex color #282828 and the opacity that was added to the element.

One possible drawback is that rgba color values is not supported by IE8 and lower. If you need to support those browsers then this method is not for you.

.registerWrap {
    border-radius: 10px;
    border: 3px solid white;
    width: 45%;
    height: 500px;
    margin: 100px auto 40px auto;
    padding: 40px;
    text-align: center;
    background-color: rgba(40, 40, 40, 0.9);
    /* For IE8 and earlier */
}

Here is a sample snippet with an image as the background for the wrap to make the effect more visible.

#wrap {
  background: url(http://lorempixel.com/600/400);
}
.registerWrap {
  border-radius: 10px;
  border: 3px solid white;
  width: 45%;
  height: 500px;
  margin: 100px auto 40px auto;
  padding: 40px;
  text-align: center;
  background-color: #282828;
  opacity: 0.9;
  filter: alpha(opacity=90);
  /* For IE8 and earlier */
}
.inputbar[type=text] {
  display: block;
  width: 400px;
  margin: 10px auto;
  font-size: 18px;
  padding: 10px;
  -webkit-transition: all 0.40s ease-in-out;
  -moz-transition: all 0.40s ease-in-out;
  -ms-transition: all 0.40s ease-in-out;
  -o-transition: all 0.40s ease-in-out;
  outline: none;
  border: 1px solid #DDDDDD;
}
.inputbar:hover {
  -moz-box-shadow: 0 0 10px #ccc;
  -webkit-box-shadow: 0 0 10px #ccc;
  box-shadow: 0 0 10px #ccc;
}
.inputbar[type=text]:focus {
  border: 1px solid #800000;
  -moz-box-shadow: 0 0 1px 1px rgba(128, 0, 0, 1);
  -webkit-box-shadow: 0 0 1px 1px rgba(128, 0, 0, 1);
  box-shadow: 0 0 1px 1px rgba(128, 0, 0, 1);
}
#registerButton[type=submit] {
  margin: 15px auto;
  width: 425px;
  font-size: 20px;
  font-weight: bold;
  padding: 14px;
  cursor: pointer;
  background-color: #800000;
  border: none;
  color: #FFFFFF;
}
#registerButton[type=submit]:hover {
  -moz-box-shadow: 0 0 10px #ccc;
  -webkit-box-shadow: 0 0 10px #ccc;
  box-shadow: 0 0 10px #ccc;
}

<div id="wrap">
  <div class="registerWrap">
    <form action="" method="POST">
      <input type="text" class="inputbar" name="firstname" placeholder="First Name" required>
      <input type="text" class="inputbar" name="lastname" placeholder="Last Name" required>
      <input type="email" class="inputbaremail" name="email" placeholder="Email" required>
      <input type="tel" class="inputbarphone" name="phone_number" placeholder="Cell Phone Number" required>
      <input type="text" class="inputbar" name="username" placeholder="Username" autocomplete="off" required>
      <input type="password" name="password" placeholder="Password" class="inputbarp" required>
      <input type="password" name="password_again" placeholder="Confirm Password" class="inputbarp" required>
      <label for="registerButton">
        <input id="registerButton" type="submit" name="submit" value="Register">
      </label>
    </form>
  </div>