Html 输入：焦点~标签不工作_Html_Css

Html 输入：焦点~标签不工作

html css

Html 输入：焦点~标签不工作,html,css,Html,Css,帮助我不知道如何修复我的css工作表上的错误，输入：focus~标签不起作用的部分，我真的不知道缺少了什么。希望你们能帮我解决这个问题，我只是刚刚开始网络编程。我在这里尝试了所有可能的答案，并且已经在谷歌上搜索了可能的答案，但仍然不起作用。输入的用户名和密码与标签混合 <html> <head> <meta charset="utf-8"> <title> Transparent Login Form Design </ti

帮助我不知道如何修复我的css工作表上的错误，输入：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;

}


透明登录表单设计
登录
用户名
密码
身体{
保证金：0；
填充：0；
背景：url（work.jpg）；
背景尺寸：封面；
字体系列：无衬线；
}
.盒子{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
宽度：400px；
填充：40px；
背景：rgba（0,0,0,8）；
框大小：边框框；
盒影：5px15px25pxRGBA（0,0,0,5）；
边界半径：8px；
}
.方框h2
{
利润率：0.30px；
填充：0；
颜色：#fff；
文本对齐：居中；
}
.box.inputBox
{
位置：相对位置；
}      
.box.inputBox输入
{
宽度：100%；
填充：10px0；
字体大小：16px；
颜色：#fff；
字母间距：1px；
边缘底部：30px；
边界：无；
边框底部：1px实心#fff；
大纲：无；
背景：透明；
}
.box.inputBox标签
{
位置：绝对位置；
排名：0；
左：0；
字母间距：1px；
填充：10px0；
字体大小：16px；
颜色：#fff；
指针事件：无；
过渡：.5s；
}
.box.inputBox输入：焦点~标签
{
顶部：-20px；
左：0；
颜色：#03a9f4；
字体大小：12px；
}
.box.inputBox输入：有效~标签
{
顶部：-20px；
左：0；
颜色：#03a9f4；
字体大小：12px；
}
.box.inputBox输入：焦点，
.box.inputBox输入：有效
{
边框底部：2个实心#03a9f4；
}   
.box输入[type=“submit”]
{
背景：透明；
边界：无；
大纲：无；
颜色：#fff；
背景#03a9f4；
填充：10px 20px；
光标：指针；
边界半径：5px；
}

请参见：

8.3.2。后继兄弟组合子

随后的兄弟组合器由“tilde”（U+007E，~）组成分隔两个简单选择器序列的字符。这个由两个序列表示的元素在文档树和由第一个序列表示的元素在由第二个

在您的示例中，由第二个序列表示的元素位于第一个序列之前

CSS没有以前的兄弟组合符。

您应该这样做。如果没有for属性或表单控件，标签将毫无用处。