点击input文本框时父div的padding-top不生效，该如何解决？

问题原因分析 #

1. 原生JS方案失效原因 #

• 触发事件绑定错误：你只给input绑定了onclick事件，只有点击input的瞬间才会执行一次reset_size函数，当input失去焦点（比如点击页面其他位置）时，没有事件触发这个函数执行，所以padding不会还原；另外如果函数定义在DOM渲染完成后的封闭作用域里，内联onclick会找不到函数，直接导致代码不执行。
• 事件选择不合理：应该监听focus（获得焦点）和blur（失去焦点）事件，而非click事件，因为用户也可能通过Tab键切到input，此时click不会触发，但焦点已经落在input上。

2. CSS :focus-within 方案失效原因 #

• 最高概率的诱因是你使用了第三方日期选择器插件：大部分日期选择器触发后会主动让原始input失去焦点，或是生成的悬浮日期面板不在#quarter_tenure div内部，导致div的后代元素没有处于聚焦状态，:focus-within 伪类自然不会生效。
• 也可能存在CSS优先级冲突：检查是否有其他权重更高的CSS规则覆盖了#quarter_tenure的padding-top设置，比如带!important的规则、行内样式。

修复方案 #

方案一：修改JS实现（兼容性最好） #

首先移除input上的内联onclick属性，改为直接监听focus和blur事件，代码如下：

调整后的HTML

<div id="quarter_tenure">
    <p id="date"><b>Occupancy Date</b> :<br>
           <input type="text" id="datepicker" name="datefilter" value=""/>
    </p>
</div>

调整后的JS

// 等待DOM加载完成再绑定事件，避免找不到元素
document.addEventListener('DOMContentLoaded', function() {
    const dateInput = document.getElementById('datepicker');
    const quarterDiv = document.getElementById('quarter_tenure');
    
    // 获得焦点时增大padding
    dateInput.addEventListener('focus', function() {
        quarterDiv.style.paddingTop = '30em';
    });
    
    // 失去焦点时还原padding
    dateInput.addEventListener('blur', function() {
        quarterDiv.style.paddingTop = '15em';
    });
});

如果确实使用了日期选择器插件，直接绑定插件的打开/关闭事件修改样式比监听focus/blur更稳定，以常用的daterangepicker为例：

$('#datepicker').daterangepicker({
    // 你的原有插件配置
}).on('show.daterangepicker', function() {
    document.getElementById('quarter_tenure').style.paddingTop = '30em';
}).on('hide.daterangepicker', function() {
    document.getElementById('quarter_tenure').style.paddingTop = '15em';
});

方案二：修复CSS :focus-within 方案 #

如果要继续使用CSS方案，可以修改日期选择器插件配置，把生成的日期面板元素挂载到#quarter_tenure div内部，这样面板打开时div的后代存在聚焦元素，:focus-within 就会正常生效。也可以先给CSS规则加!important测试是否为优先级问题：

#quarter_tenure:focus-within {
    padding-top: 30em !important;
}

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