Floating Label效果在Chrome中与Firefox表现不一致的跨浏览器适配问题

问题说明 #

Floating Label 指输入框的标签默认以占位符形式展示，当用户点击输入框准备输入内容时，输入框的占位符向上移动成为输入框的标签。
原实现方案在Mozilla Firefox浏览器中运行符合预期，但在Chromium内核、Safari等浏览器中无法正常实现对应效果，核心问题是不同浏览器对空值placeholder的:not(:placeholder-shown)伪类判定逻辑不一致。

适配方案 #

核心改动点 #

• 输入框的placeholder属性设置为空格而非空字符串，统一各浏览器对占位符状态的判定逻辑
• 调整label定位为绝对定位，避免文档流占位导致的布局偏移
• 新增占位符透明样式，隐藏placeholder的空格内容
• 统一输入框高度属性，避免不同浏览器默认高度差异

完整适配代码 #

<html>
<style>
.float-label {
   position: relative;
   margin-bottom: 20px;
   min-height: 44px;
}
label.set-float {
   color:#999;
   font-size:16px;
   line-height: 18px;
   font-weight:normal;
   position: absolute;
   pointer-events:none;
   left: 0;
   top: 10px;
   transition:0.6s ease all;
   -o-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: -10px;
   font-size:14px;
   line-height:18px;
   color: #787878;
   font-weight: normal;
   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: 10px 0;
   height: 40px;
}
/* 隐藏placeholder的空格内容 */
.float-input::placeholder {
    color: transparent;
    opacity: 0;
}
.float-input::-webkit-input-placeholder {
    color: transparent;
    opacity: 0;
}
.float-input::-moz-placeholder {
    color: transparent;
    opacity: 0;
}
.float-input:-ms-input-placeholder {
    color: transparent;
    opacity: 0;
}

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;
   box-shadow: none;
   -webkit-box-shadow: none;
   padding: 10px 0;
   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>

兼容性说明 #

上述方案已适配Chrome、Firefox、Safari、Opera等主流桌面及移动端浏览器，效果与Firefox原预期表现一致。

内容的提问来源于stack exchange，提问作者Chandru