填充文本框后如何使浮动标签保持不变？

Question

我正在使用 css 尝试在文本框中使用浮动标签，但是一旦键入文本并将焦点从文本框中移开，标签就会隐藏文本框的内容。我使用 YouTube 教程完成了此操作，但我无法弄清楚我在哪里犯了错误。请帮助我保持标签。

        .main{
            font-size:15px;
            position:relative;
            left:20%;
            overflow:hidden;
        }

        .textbox{
            height:30px;
            width:100%;
            color: grey;
            padding-top:20px;
            border: none;
            border-bottom: 1px solid black;
        }

        .label-name{
            position:absolute;
            bottom:0px;
            top:0px;
            padding:0px 2px 0px 2px;
            height:30px;
            width:100%;
            pointer-events:none;
        }

        .label-name::after{
            content:"";
            position: absolute;
            left:0px;
            bottom:-23px;
            height:30px;
            width:100%;
            border-bottom: 3px solid blue;
            transform: translateX(-100%);
            transition: transform 0.3s ease;
        }

       

        .span-name{
            position:absolute;
            bottom:-15px;
            transition: all 0.3s ease;
        }

         .span-name::after{
            position: absolute;
            content:"";
            bottom:-23px;
        }

        .textbox:focus + .label-name .span-name {
            transform: translateY(-150%);
            font-size: 13px;
            color: #5fa8d3;
        }

        .textbox:focus, .textbox:valid{
            box-shadow:none;
            outline:none;
        }
        

        .textbox:focus + .label-name::after,
        .textbox:valid + .label-name .span-name::after {
            transform:translateY(0%);
        }

<div class="main">
            <input class="textbox" type="text"/>
            <label class="label-name">
                <span class="span-name">Name</span>
            </label>
        </div>

Answer 1

您可以修改代码中的两处以使其正常工作：

将 required 添加到输入，以便根据作为输入提供的值更新 :valid 伪选择器
将 transform: translateY(-150%) 属性添加到选择器 .textbox:valid + .label-name .span-name。

工作示例：

        .main{
            font-size:15px;
            position:relative;
            left:20%;
            overflow:hidden;
        }

        .textbox{
            height:30px;
            width:100%;
            color: grey;
            padding-top:20px;
            border: none;
            border-bottom: 1px solid black;
        }

        .label-name{
            position:absolute;
            bottom:0px;
            top:0px;
            padding:0px 2px 0px 2px;
            height:30px;
            width:100%;
            pointer-events:none;
        }

        .label-name::after{
            content:"";
            position: absolute;
            left:0px;
            bottom:-23px;
            height:30px;
            width:100%;
            border-bottom: 3px solid blue;
            transform: translateX(-100%);
            transition: transform 0.3s ease;
        }

       

        .span-name{
            position:absolute;
            bottom:-15px;
            transition: all 0.3s ease;
        }

         .span-name::after{
            position: absolute;
            content:"";
            bottom:-23px;
        }

        .textbox:focus + .label-name .span-name,
        .textbox:valid + .label-name .span-name  { /* add new selector here */
            transform: translateY(-150%);
            font-size: 13px;
            color: #5fa8d3;
        }

        .textbox:focus, .textbox:valid{
            box-shadow:none;
            outline:none;
        }
        

        .textbox:focus + .label-name::after,
        .textbox:valid + .label-name .span-name::after {
            transform:translateY(0%);
        }

<div class="main">
            <input class="textbox" type="text" required/>
            <label class="label-name">
                <span class="span-name">Name</span>
            </label>
        </div>

Answer 2

.group {
    position: relative;
    margin-bottom: 30px;
}

.group input {
    font-size: 13px;
    padding: 5px 10px 5px 5px;
    display: block;
    width: 300px;
    border: none;
}
.group input:read-only ~ label  {
    top: -12px !important;
    font-size: 11px;
}
.group input:focus {
    outline: none;
}
.group label {
    font-size: 12px;
    font-weight: bold;
    position: absolute;
    letter-spacing: 1px;
    pointer-events: none;
    left: 8px;
    top: 10px;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
}
.group input:focus~label,
input:valid~label {
    top: -12px;
    font-size: 11px;
}

.group .bar {
    position: relative;
    display: block;
    border-bottom: 0;
}

.group .bar:before {
    content: '';
    height: 1px;
    bottom: 0px;
    position: absolute;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
    background-color:black;
    left:0;
    right:0
}

<div class="group w_100">
         <input
             type="text" 
             id="email" 
             name="email" required/>
             <span class="highlight"></span><span class="bar"></span>
             <label class="left_0px" htmlFor="email">Email</label>
    </div>

填充文本框后如何使浮动标签保持不变？

How to make the floating label stay after textbox is fillled?

html

css

css-animations