how to change a css property of div when a text box is selected

Question

i have been trying for a while now to figure out how to change the opacity of a login panel that is being called in using a php function. and in css i have tryed this in css

.container
{
    background: #FFF;
    opacity: 0.6;
    width: 320px;
    height: 500px;
    align-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    padding: 30px 30px;
    transition: 0.3s;
}
.container:hover
{
    opacity: initial;
    transition: 0.3s;
}
.container input[type="text"]:focus .container
{
    opacity: initial;
    transition: 0.3s;
}

to change the opacity of the .container element when the input is focused on but it dosnt work is there any way to fix this btw the input is in a form like this

<div class="container">
            <form action="validatelogin.php" method="POST">
                <p>Username:</p>
                <input type="text" name="usernameinput" id="usernameinput" />
                <p>Password:</p>
                <input type="Password" name="passwordinput" id="passwordinput" />
                <br />
                <div style="margin-top:10px;">
                    <input type="submit" value="Login" />
                    <button type="button" onclick="location.href=\"register.html\";">Register</button>
                </div>
            </form>
        </div>        

Answer 1

https://jsfiddle.net/97py6vgj/23/ is my solution. I just used jQuery when I detected a mousedown on the container. To change the css, I used the .css() method. Then, I did the trick where you detect a click outside of the element, and made it back to regular. You can edit this accordingly.

I will add the snippet here.

var stay = 0;
$('input').mousedown(function() {
	$(".container").css("opacity", "initial");
  stay = 1;
});
$(window).mousedown(function () {
    $('.container').css("opacity", "0.6")
    stay = 0;
});
 
$('.container').mousedown(function (event) {
    
    event.stopPropagation();
});
$('.container').mouseenter(function() {
  $(this).css("opacity", "initial");
  $(this).css("transition", "0.3s");
});
$('.container').mouseleave(function() {
  if(stay == 0) {
  $(this).css("opacity", "0.6");
  $(this).css("transition", "0.3s");
  } else {$(this).css("opacity", "initial");}
});

.container
{
    background: #FFF;
    opacity: 0.6;
    width: 320px;
    height: 500px;
    align-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    padding: 30px 30px;
    transition: 0.3s;
}
.container input[type="text"]:focus .container
{
    opacity: initial;
    transition: 0.3s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
            <form action="validatelogin.php" method="POST">
                <p>Username:</p>
                <input type="text" name="usernameinput" id="usernameinput" />
                <p>Password:</p>
                <input type="Password" name="passwordinput" id="passwordinput" />
                <br />
                <div style="margin-top:10px;">
                    <input type="submit" value="Login" />
                    <button type="button" onclick="location.href=\'register.html\';">Register</button>
                </div>
            </form>
        </div>

I'm not sure if this is what you wanted but here you are.