调整CSS输入框margin属性后placeholder消失如何解决

问题背景 #

落地页开发表单时需要调整输入控件间距，初始状态下控件上下margin为1rem 0，将.input-form-catalogue和.select-country-form-catalogue两个类的margin修改为0.5rem 0缩小间距后，文本输入框的placeholder提示文字意外消失。

现有代码 #

HTML结构 #

<input class="input-form-catalogue" type="text" name="name" placeholder="name*" required>
<input class="input-form-catalogue" type="email" name="email" placeholder="email*" required>
<div class="row">
    <div class="col-6">
        <select name="country" title="country*" class="select-country-form-catalogue selectpicker text-center">
            @include('includes.options-country')
        </select>
    </div>
    <div class="col-6" style="padding-right:7.5px;padding-left: 2px;">
        <input class="input-form-catalogue" type="text" name="phone" placeholder="phone*" required>
    </div>
</div>

初始CSS样式 #

.input-form-catalogue {
    width: 100%;
    padding: 0.7rem;
    border: 0.1px solid #7B7B79;
    background: transparent;
    margin: 1rem 0;
    text-align: center;
}

.select-country-form-catalogue {
    width: 100%;
    padding: 0.55rem;
    border: 0.1px solid #7B7B79;
    background: transparent;
    margin: 1rem 0;
    text-align: center;
    color: #7B7B79;
}

排查思路 #

• 先查盒模型问题：确认是否有全局样式给input设置了固定高度，未设置border-box的情况下，padding+边框的总高度超过固定高度后，placeholder会被挤出输入框可视区域，margin缩小后控件排列更紧密，更容易触发这类高度溢出问题。
• 再查栅格样式冲突：代码中使用了.row、.col-6栅格类，这类类默认自带负margin、列padding规则，且部分栅格样式默认带overflow:hidden，现有代码给phone输入框的父级col设置了不对称的内联padding，间距缩小后很容易出现列内容被裁切的问题。
• 查第三方插件干扰：国家选择框使用了selectpicker插件，这类插件会自动在原select外包裹多层自定义DOM，自带默认margin、padding规则，间距缩小时插件生成的容器很容易挤压相邻输入框的渲染空间，触发文字显示异常。
• 最后查placeholder专属样式：确认全局是否定义过::placeholder相关样式，是否设置了和margin联动的行高、垂直偏移、透明度规则，margin变化后触发了样式异常。

解决方案 #

1. 先统一盒模型规则，从根源避免高度溢出：

.input-form-catalogue, .select-country-form-catalogue {
    box-sizing: border-box;
}

2. 移除col上不对称的内联padding，统一设置栅格列间距，避免内容裁切：

/* 移除phone输入框父级col的内联style，统一设置列padding */
.row .col-6 {
    padding: 0 7.5px;
}

3. 统一设置控件间距和行高，避免不同控件高度不一致导致的排列异常：

.input-form-catalogue, .select-country-form-catalogue {
    margin: 0.5rem 0;
    line-height: 1.5;
}
/* 覆盖selectpicker插件生成容器的默认样式，和其他输入框保持一致 */
.bootstrap-select .dropdown-toggle {
    margin: 0.5rem 0 !important;
    padding: 0.7rem !important;
}

4. 显式设置placeholder样式，避免被全局样式覆盖导致“消失”：

.input-form-catalogue::placeholder {
    color: #7B7B79;
    opacity: 1;
    text-align: center;
}

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