WordPress预订页移动端/平板端隐藏下拉空值选项CSS方案

问题分析 #

你当前的CSS仅对屏幕宽度≥600px的PC端生效，移动端和平板（宽度<600px）未被覆盖；同时部分移动端浏览器对select组件的option样式渲染有特殊限制，导致原有规则失效。

方案一：CSS适配全设备 #

替换或补充原有CSS代码，使用更精准的选择器并覆盖所有屏幕尺寸：

/* 全局隐藏空值选项，适配所有设备 */
#sln_nombre_de_personnes option[value=""] {
    display: none !important;
    visibility: hidden;
    height: 0;
    padding: 0;
}

/* 保留原有PC端规则（可选，若全局规则生效可删除） */
@media only screen and (min-width: 600px) {
    #sln-salon select option[value=""] {
        display: none !important;
    }
}

• 直接针对下拉框ID#sln_nombre_de_personnes选择，避免样式冲突；
• 额外添加visibility: hidden等属性，解决部分移动端浏览器不识别display:none的问题。

方案二：JavaScript彻底移除异常选项 #

若CSS方案仍无效，可通过JS从DOM层面删除该选项，确保所有设备生效：

document.addEventListener('DOMContentLoaded', () => {
    const select = document.getElementById('sln_nombre_de_personnes');
    const badOption = select.querySelector('option[value=""]');
    badOption && badOption.remove();
});

将代码添加到WordPress主题的自定义JavaScript区域，或通过代码片段插件插入即可。

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