浮动标签在 Chrome 中不能像 mozilla firefox 一样工作答案

【问题标题】：Floating Label is not working in Chrome as like mozilla firefox浮动标签在 Chrome 中不能像 mozilla firefox 一样工作
【发布时间】：2021-08-24 10:38:34
【问题描述】：

浮动标签

输入框的标签将显示为占位符。一旦用户点击输入框进行输入，输入框的占位符需要作为标签移到顶部。

浮动标签的 Gif 图像： https://media.giphy.com/media/l4Fsjj2HDqjOiTU0U/giphy.gif

我正在尝试使用纯 CSS 方法在输入框中使用浮动标签。我正在使用以下代码在网页中浮动标签。

HTML

<html>
<style>
.float-label {
   position:relative;
   margin-bottom:-20px;
}
label.set-float {
   color:#999;
   font-size:16px;
   line-height: 18px;
   font-weight:normal;
   position:relative;
   pointer-events:none;
   top:-20px;
   -o-transition:0.6s ease all;
   transition:0.6s ease all;
   -moz-transition:0.6s ease all;
   -webkit-transition:0.6s ease all;
}

.float-input:focus ~ label.set-float, .float-input:not(:placeholder-shown) ~ label.set-float{
   top:-40px;
   font-size:16px;
   line-height:18px;
   color: #787878;
   font-weight: normal;
   padding-left: 0px;
   outline: none;
}

.float-input:focus ~ label.required:after, .float-input:not(:placeholder-shown) ~ label.required:after{
   content: " *";
   color: red;
}

input[type="text"].input {
   background: transparent;
   border: none;
   border-bottom: 1px solid #C8C8C8;
   border-radius: 0px;
   font-size: 16px;
   line-height: 18px;
   color: #787878;
   width: 320px;
   padding: 0px 0px 0px 0px;
}

input[type="text"].input:focus {
   background: transparent;
   border: none;
   border-bottom: 1px solid black;
   border-radius: 0px;
   font-size: 16px;
   line-height: 18px;
   color: #333333;
   width: 320px;
   -webkit-box-shadow: inset 0px 0px 0px 0px #97144D;
           box-shadow: inset 0px 0px 0px 0px #97144D;
   padding: 0px 0px 0px 0px;
   outline: none;
}
.form-width {
   width: 352px;
   padding: 32px 15px 30px;
}

.div-pad {
   padding-top: 30px;
}
</style>
<div class="form-width">
    <div class="div-pad">
        <div class="float-label">
            <input id="name" type="text" class="float-input input" name="name" placeholder=""
               autocomplete="off" maxlength="50">
            <label class="set-float required">Name</label>
        </div>
    </div>
</div>
</html>

上述代码在 Mozilla Firefox 浏览器中符合我的预期，但在 Chromium 浏览器中却没有。

Mozilla 火狐

普通视图

焦点视图

铬

普通视图

焦点视图

您能否提供关于在所有类型的桌面/移动浏览器（Safari、Opera 和其他默认浏览器）中浮动标签的建议，例如 Mozilla Firefox。

提前感谢您的宝贵意见和建议。

【问题讨论】：

我不太明白真正的问题是什么？ “浮动标签”在前端开发中并不是一个已知的“东西”。那么您能否更清楚地了解Floating Label is not working in Chrome 的含义？我所能看到的只是底部边距（空格）的差异，但仅此而已
@MihaiT "'浮动标签'不是前端开发中已知的'东西'" - 哦，但是是的，很遗憾它是。 medium.com/simple-human/…
@CBroe 抱歉。我的错。不知道那是一件事:) 我的意思是，我不知道这些标签被称为“浮动标签”。嗯，你每天都会学到一些东西。谢谢你:)

标签： html css

【解决方案1】：

这是由于 :placeholder-shown 选择器造成的。它在 firefox 和 chrome 上的工作方式相同，但 firefox 似乎有一个默认（空）占位符，而 chrome 没有。如果您为 chrome 指定 " " 之一，它应该可以工作：

<input
    id="name"
    type="text"
    placeholder=" "
    class="float-input input"
    name="name"
    autocomplete="off"
    maxlength="50"
    data-dashlane-rid="6b78a2834d4b7713"
    data-form-type="other"
>

您遇到的问题是，:placeholder-shown 选择器仅在需要显示占位符时才能在 chrome 中使用。这意味着，占位符必须评估真实的东西，例如" ".

.float-label {
   position:relative;
   margin-bottom:-20px;
}
label.set-float {
   color:#999;
   font-size:16px;
   line-height: 18px;
   font-weight:normal;
   position:relative;
   pointer-events:none;
   top:-20px;
   transition:0.6s ease all;
}

.float-input:focus ~ label.set-float, .float-input:not(:placeholder-shown) ~ label.set-float{
   top:-40px;
   color: #787878;
   padding-left: 0px;
   outline: none;
}

.float-input:focus ~ label.required:after, .float-input:not(:placeholder-shown) ~ label.required:after{
   content: " *";
   color: red;
}

input[type="text"].input {
   background: transparent;
   border: none;
   border-bottom: 1px solid #C8C8C8;
   border-radius: 0px;
   font-size: 16px;
   line-height: 18px;
   color: #787878;
   width: 320px;
   padding: 0px 0px 0px 0px;
}

input[type="text"].input:focus {
   border-color: black;
   color: #333333;
   box-shadow: inset 0px 0px 0px 0px #97144D;
   outline: none;
}
.form-width {
   width: 352px;
   padding: 32px 15px 30px;
}

.div-pad {
   padding-top: 30px;
}

<div class="form-width">
    <div class="div-pad">
        <div class="float-label">
            <input id="name" type="text" class="float-input input" name="name" placeholder=" "
               autocomplete="off" maxlength="50">
            <label class="set-float required">Name</label>
        </div>
    </div>
</div>

【讨论】：

我已经在使用placeholder=""，但是标签的浮动仍然没有发生。
是的，抱歉粘贴了错误的代码。占位符显然必须评估为真实的东西才能激活（除了没有任何东西或""）