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

【问题标题】：How to make the floating label stay after textbox is fillled?填充文本框后如何使浮动标签保持不变？
【发布时间】：2021-09-18 13:11:54
【问题描述】：

我正在使用 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>

【问题讨论】：

标签： html css css-animations

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：