How to change the opacity from other elements on focus in an input field

Question

I try to make the body on focus in the input field dark and set the opacity to 6. It works great so far. But I want that the input field does not look like the whole body - and that doesn't work.

I want that the input field on focus is bright and all the rest is dark.

Here's my code:

HTML

<b:navBar position="top" sticky="true" fluid="false" brand="bIg">
    <b:navbarLinks pull="left">
    <h:form styleClass="navbar-form navbar-left"> 
        <b:inputText placeholder="Suchbegriff" styleClass="inputNavbar"></b:inputText>
        <b:commandButton look="default" value="suchen" styleClass="btnSearch"></b:commandButton>
    </h:form>
    </b:navbarLinks>
    <b:navbarLinks pull="right">
        <b:dropMenu value="" iconAwesome="fa-user">
            <b:navLink value="Profil bearbeiten"></b:navLink>
            <b:navLink></b:navLink>
            <b:navLink value="Abmelden" styleClass="logoutLink"></b:navLink>
        </b:dropMenu>
        <b:dropMenu value="" iconAwesome="fa-wrench">
            <b:navLink value="Einstellungen"></b:navLink>
        </b:dropMenu>
    </b:navbarLinks>
</b:navBar>

CSS

body.dark {
  background-color: #333;
  opacity: 0.6;
}

JS

 $(function() {
  $('.inputNavbar').on('focus', function() {
    $('body').not(this).addClass('dark');
  });

 $('.inputNavbar').on('blur', function() {
    $('body').not(this).removeClass('dark');
 });
});

opacity is "inherited", you can't set it on the body, or other parent elements, and expect it to not apply to a single child element etc. — adeneo, Jul 08 '17 at 11:13
Possible duplicate of [I do not want to inherit the child opacity from the parent in CSS](https://stackoverflow.com/questions/5770341/i-do-not-want-to-inherit-the-child-opacity-from-the-parent-in-css) — ESP32, Jul 08 '17 at 11:16

Farhad Bagherlo · Accepted Answer · 2017-07-08T13:05:18.927

$(document).ready(function(){
  $('.inputNavbar').on('focus', function() {
   
        if(!$('body').hasClass('dark'))
        {
          $('body').removeClass();
           $('body').addClass('dark');
          }

  });

 $('.inputNavbar').on('blur', function() {
       if($('body').hasClass('dark'))
       {
           $('body').removeClass();
           $('body').addClass('Undark');
       
       }
 });
});

body.dark {
  background-color: #333;
  opacity: 1;
}
body.Undark {
  background-color: #fff;
  opacity: 0.6;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

        <input type="text" placeholder="Suchbegriff" class="inputNavbar"/>
        <input type="button"  look="default" value="suchen"/>

How to change the opacity from other elements on focus in an input field

1 Answers1