如何用CSS类选择器隐藏HTML中time输入框的时钟图标

问题场景 #

你使用的HTML代码如下：

<input id="appt-time" type="time" name="appt-time" min="12:00" max="18:00" class='time'/>

全局CSS选择器可以正常隐藏Chrome中time输入框的时钟图标：

input[type="time"]::-webkit-calendar-picker-indicator {
    background: none;
}

但使用类选择器的写法无效：

.time input[type="time"]::-webkit-calendar-picker-indicator {
    background: none;
}

错误原因 #

.time input[type="time"]的选择逻辑是选择拥有time类的父元素下的type="time"输入框，但你的目标input元素本身就带有time类，这个选择器无法匹配到目标元素，因此样式不生效。

解决方法 #

将类选择器与input类型选择器直接结合，精准定位目标元素：

写法一（明确类型）

input.time[type="time"]::-webkit-calendar-picker-indicator {
    background: none;
}

写法二（简洁版）

如果页面中没有其他带time类的非input元素，也可以简化为：

.time::-webkit-calendar-picker-indicator {
    background: none;
}

两种写法都能正确定位到带time类的time输入框，隐藏其时钟图标。

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