如何在Firefox浏览器中隐藏input[type=time]的AM/PM字段

嘿，我懂你的困扰——你用的-webkit-前缀CSS属性只对Chrome、Safari这类webkit内核浏览器生效，Firefox基于Gecko内核，得用它专属的伪元素和前缀才能搞定样式兼容！

先拆解下你原有代码的问题：

input[type=time]::-webkit-datetime-edit-ampm-field { display: none; } 
input[type=time]::-webkit-inner-spin-button, input[type=time]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  -moz-appearance: none; 
  appearance: none; 
  margin: 9px; 
}

这里的::-webkit-*系列伪元素Firefox完全不识别，而且-moz-appearance写在webkit专属的伪元素规则里也起不到任何作用，必须针对Firefox单独编写样式规则。

下面是兼容Chrome和Firefox的完整代码：

/* 隐藏AM/PM字段 - Chrome/Safari等WebKit内核浏览器 */
input[type=time]::-webkit-datetime-edit-ampm-field {
  display: none;
}

/* 隐藏微调按钮 - Chrome/Safari等WebKit内核浏览器 */
input[type=time]::-webkit-inner-spin-button,
input[type=time]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 9px;
}

/* 隐藏AM/PM字段 - Firefox */
input[type=time]::-moz-time-picker::ampm {
  display: none;
}

/* 隐藏微调按钮 - Firefox */
input[type=time]::-moz-inner-spin-button {
  -moz-appearance: none;
  appearance: none;
  margin: 9px;
}

代码说明： #

• 针对Firefox的AM/PM字段，我们用::-moz-time-picker::ampm这个专属伪元素来设置隐藏；
• Firefox的时间输入框微调按钮只需要针对::-moz-inner-spin-button设置-moz-appearance: none，就能去掉默认样式，再调整margin和你原有效果保持一致；
• 把WebKit和Firefox的规则分开编写，确保两类内核的浏览器都能识别对应的样式。

你可以把这段代码替换原有代码，然后在Chrome和Firefox里测试，应该就能达到你想要的效果啦！

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