Change opacity on child element in CSS

Question

I am trying to change the opacity of a child element (button) within a form to opacity: 1;

The parent form is at opacity: 0.6; and I can't figure out how to override this.

Answer 1

To have child with opacity: 1, you need to use the background property, as opacity is applied to the element as a whole, including the children:

body {
  background-image: url("https://i.pinimg.com/originals/4a/06/52/4a065201509c0fc50e7341ce04cf7902.jpg");
}

form {
  padding: 25px;
  background: rgba(0, 0, 0, 0.4);
}

form button {
  opacity: 1 !important;
}

<form>
  <input type="text" />
  <button>Submit!</button>
</form>

Answer 2

You can't override it by using !important or by simply adding a CSS opacity:1; to the button object since is a child and is part of the rendered content of the parent.

But you can override it probably by using JS or easier than that by using the css :not(X) pseudo-class selector, where X is the "object" , "id" or "class" of your choosing.

for example:

.parent :not(button) {
    opacity:0.6;
} 

<div class="parent">
    <h1>some text here or other content than just a button </h1>
    <div>some text here or other content than just a button </div>
    <p>some text here or other content than just a button </p>
    <button> im going to have my own opacity</button>
</div>

Answer 3

You will need to make the form opacity: 1; and make everything inside it except the button opacity: 0.6;.

You could do this by labelling everything in the form except the button with a class, and set this to opacity: 0.6;.

Answer 4

You can make all items in the form which are not a <button> to have an opacity of 0.6.

form :not(button) {
    opacity: 0.6;
}

<form>
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="fname">
    <label for="fname">Last Name</label>
    <input type="text" id="lname" name="lname">
    <button>Submit</button>
</form>