Input:focus ~ label not working

Question

Help I dunno how to fix this error on my css sheet, the part where input:focus ~ label is not working, I really dont know what's missing.Hope you can guys help me on this, I'm just new on web programming. I tried all the possible answers here and already googled possible answers but still not working. The input username and password are mixed with the label.

<html>
<head>
    <meta charset="utf-8">
    <title> Transparent Login Form Design </title>
    <link rel="stylesheet" type="text/css" href="style.css">   
</head>
 <body>
    <div class="box">
        <h2>Login</h2>
            <form>
                <div class="inputBox">
                    <label>Username</label>
                    <input type="text" name="" required="">
                </div>  
                <div class="inputBox">  
                    <label>Password</label>
                    <input type="password" name="" required="">
                </div>  
                <input type="submit" name="" value="Submit">
                <a href="#">Forget Password</a>    
            </form>


        </div>

 </body>
</html>

body{
    margin: 0;
    padding: 0;
    background: url(work.jpg);
    background-size: cover;
    font-family: sans-serif;
}
.box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 400px;
    padding: 40px;
    background: rgba(0, 0, 0,.8);
    box-sizing: border-box;
    box-shadow: 5px 15px 25px  rgba(0,0,0,.5);
    border-radius: 8px;     
}
.box h2
{
    margin: 0 0 30px;
    padding: 0;
    color: #fff;
    text-align: center;
 }
.box .inputBox
{
    position: relative;
}      

.box .inputBox input
{
    width: 100%;
    padding: 10px 0;
    font-size: 16px;
    color:  #fff;
    letter-spacing: 1px;
    margin-bottom: 30px;
    border: none;
    border-bottom: 1px solid #fff;
    outline: none;
    background: transparent;
}

.box .inputBox label
{
    position: absolute;
    top: 0;
    left: 0;
    letter-spacing: 1px;
    padding: 10px 0;
    font-size: 16px;
    color:  #fff;
    pointer-events: none;
    transition: .5s;
}

.box .inputBox input:focus ~ label
{
    top: -20px;
    left: 0;
    color: #03a9f4;
    font-size: 12px;
}

.box .inputBox input:valid ~ label
{
    top: -20px;
    left: 0;
    color: #03a9f4;
    font-size: 12px;
}

.box .inputBox input:focus,
.box .inputBox input:valid
{
    border-bottom: 2px solid #03a9f4;
}   

.box input[type="submit"]
{
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    background: #03a9f4;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;

}

You should [learn how to use the label element properly](http://www.456bereastreet.com/archive/200711/use_the_label_element_to_make_your_html_forms_accessible/). Without a for attribute or a form control inside it, a label is useless. — Quentin, Jul 22 '18 at 14:49

score 0 · Answer 1 · answered Jul 22 '18 at 14:49

See the documentation for ~:

8.3.2. Subsequent-sibling combinator

The subsequent-sibling combinator is made of the "tilde" (U+007E, ~) character that separates two sequences of simple selectors. The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence precedes (not necessarily immediately) the element represented by the second one.

In your example, element represented by the second sequence precedes the first.

CSS does not have a previous sibling combinator.

Input:focus ~ label not working

1 Answers1