Chrome中Input元素Placeholder垂直居中问题：line-height等属性无效求助

我的input元素的placeholder文本上下存在多余间距，希望去除间距使其在元素内垂直居中。已尝试line-height: 0、vertical-align等属性，但均未生效，目前在Chrome浏览器（全屏模式）中测试。

相关代码 #

CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

.call-back-wrapper {
    display: flex;
    flex: 1;
}

#call_back {
    background: #383E46 0% 0% no-repeat border-box;
    border: none;
    color: #F4A95080;
    padding-left: 27px;
    padding-top: 18px;
    padding-bottom: 18px;
    min-width: clamp(9.615rem, 10.732vw + 2.746rem, 15.625rem);
}

input[id^="call_back"]:focus {
    outline: none;
    color: #F4A95080;
    cursor: auto;
}

input:focus[id^="call_back"]::placeholder {
    color: transparent;
}

#call_back::placeholder {
    text-align: left;
    font: normal normal normal clamp(0.654rem, 0.73vw + 0.187rem, 1.063rem) Poppins;
    color: #F4A95080;
    opacity: 1;
}

.submitBtn {
    text-align: left;
    font: normal normal normal clamp(0.615rem, 0.688vw + 0.175rem, 1rem) Poppins;
    letter-spacing: 0px;
    color: #383E46;
    background: #F4A950 0% 0% no-repeat;
    cursor: pointer;
    border: none;
}

.submitBtn:hover {
    opacity: 0.7;
}

HTML代码 #

<form method="post" name="myemailform" class="call-back-wrapper" action="form-to-email.php">
    <input type="tel" id="call_back" name="call_back"
           placeholder="Phone Number" onkeypress="return onlyNumberKey(event)" required />
    <button class="submitBtn">Call Back</button>
</form>

效果说明 #

• 预期垂直居中效果截图
• Chrome中placeholder上下间距高亮截图
• Chrome实际显示效果截图
• 移除上下padding后仍有间距的效果截图

解决方案 #

这个问题主要是浏览器默认样式、自定义字体行高，以及input的padding与line-height不匹配导致的，按以下步骤调整即可：

1. 统一line-height设置
   给input设置与placeholder字体大小一致的line-height，同时让placeholder继承这个值，确保文本垂直对齐：

   #call_back {
       /* 保留原有样式，新增/修改以下属性 */
       padding-top: 0;
       padding-bottom: 0;
       /* 与placeholder字体大小保持一致 */
       line-height: clamp(0.654rem, 0.73vw + 0.187rem, 1.063rem);
       /* 如需保留上下padding，可设置height匹配，比如：
       height: 2.5rem;
       line-height: 2.5rem;
       */
   }
   
   #call_back::placeholder {
       /* 新增继承line-height */
       line-height: inherit;
   }
   

2. 清除浏览器默认样式干扰
   部分浏览器会给input添加默认内边距或行高，可添加以下属性清除：

   #call_back {
       appearance: none;
       -webkit-appearance: none;
   }
   

3. 调整padding与容器高度的配合
   如果需要保留上下padding，计算容器高度为字体大小 + padding-top + padding-bottom，然后设置line-height等于容器高度，确保文本居中：

   #call_back {
       padding-top: 18px;
       padding-bottom: 18px;
       /* 动态计算容器高度对应的line-height */
       line-height: clamp(1.375rem, 0.73vw + 0.187rem + 1.125rem, 1.063rem + 1.125rem);
   }
   

通过以上调整，placeholder文本就能在input内实现垂直居中了。

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