Question

帮助我不知道如何解决我的CSS工作表上的错误，该问题在input：focus〜标签不起作用的那部分，我真的不知道缺少了什么。希望大家能帮我解决这个问题，我只是新手网络编程。我在这里尝试了所有可能的答案，并且已经用谷歌搜索了可能的答案，但仍然无法正常工作。输入的用户名和密码与标签混合在一起。

<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;

}

Answer 1

请参见the documentation for ~：

8.3.2。后继组合器

后继同级组合器由“波浪号”（U + 007E，〜）组成   分隔两个简单选择器序列的字符。的   这两个序列代表的元素在   文档树和第一个序列表示的元素   在（不一定是立即）在   第二个。

在您的示例中，由 second 序列表示的元素在第一个序列之前。

CSS没有以前的同级组合器。

输入：焦点〜标签不起作用

1 个答案: