如何用jQuery隐藏WebKit伪元素？实现Chrome日期输入框日历图标按需隐藏

• 核心本质：::-webkit-calendar-picker-indicator是Chrome等WebKit浏览器渲染时生成的伪元素，不属于DOM树内的实际节点，jQuery（以及所有原生DOM选择器）从机制上就无法直接选中、修改这类伪元素的样式。你之前写的$("::-webkit-calendar-picker-indicator")完全无法命中有效目标，自然不会生效。

全程不需要jQuery直接操作伪元素，通过「DOM类名变更+CSS选择器匹配」的逻辑就能实现场景化的动态控制：

第一步：预先绑定场景化CSS规则 #

把隐藏伪元素的CSS规则和自定义类绑定，类的触发载体是真实的date输入框DOM节点：

/* 只要date输入框携带hide-native-calendar类，就自动隐藏自带的日历图标 */
input[type="date"].hide-native-calendar::-webkit-calendar-picker-indicator {
  display: none;
}

第二步：通过jQuery动态控制类名增减 #

在对应业务场景触发时，给目标date输入框添加/移除这个自定义类，浏览器会自动匹配上面的CSS规则完成伪元素的样式变更，完全不需要直接操作伪元素本身：

// 业务场景触发需要隐藏图标时：给目标输入框加类
$("input[type='date'].your-target-field").addClass("hide-native-calendar");

// 场景结束需要恢复显示图标时：移除类即可
$("input[type='date'].your-target-field").removeClass("hide-native-calendar");

1. 不要尝试用任何DOM选择器（包括jQuery、原生document.querySelector）直接选中伪元素修改样式，这类操作从浏览器机制层面就无法生效。
2. 不要试图给date输入框本身加内联样式控制伪元素显隐，内联样式的作用对象是input节点本身，无法穿透到关联的伪元素上。
   伪元素的样式动态控制，永远要以真实DOM节点的属性/类名变化作为触发锚点，靠CSS的选择器匹配逻辑完成最终样式调整。

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