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>

Have you tried using JAVASCRIPT(jquery) or SASS because I don't think you can achieve this using CSS, this is something like `if statement`. — ibonly, May 05 '18 at 03:49
you need to use javascript for that. because you can not select parent element in css — patelarpan, May 05 '18 at 03:59

Random Channel · Accepted Answer · 2018-05-05T18:35:24.527

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.

thank you this worked but i wanted it to also change opacity when the user hovers over the container elemnt — Boozie, May 05 '18 at 17:58
just add your hover function again. I removed it just to show you it worked. — Random Channel, May 05 '18 at 17:59
but now if i hover over the container element it changes opacity i figured that one prety quick but when i click out side the container and go to hover again it dosnt execute the css code — Boozie, May 05 '18 at 18:11
thank you very much i hate java so i didnt know what to do i use basic java but not advanced — Boozie, May 05 '18 at 19:50

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

1 Answers1