没有上午下午的输入时间 - CSS

有时候我们需要一个时间选择器来获取用户的输入，但是默认的时间选择器会将时间以上午下午的形式呈现，很多用户可能不太习惯，而且有时候也不太适用于某些场景，比如说24小时制的时间选择器。

那么怎么让我们的时间选择器没有上午下午呢？其实我们可以利用一些 CSS 样式来实现。

HTML 代码片段

首先我们需要一个 HTML 节点来展示我们的时间选择器。这里我们使用一个 input 标签，type 属性为 time。

<input type="time" />

CSS 代码片段

然后我们可以利用 CSS 的伪元素来控制时间选择器中上下午的显示。

input[type="time"]::-webkit-calendar-picker-indicator::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #fff;
}

input[type="time"]::-webkit-calendar-picker-indicator {
  color: rgba(0, 0, 0, 0);
  opacity: 1;
}

以上代码片段中，我们利用了 ::before 伪元素来覆盖掉上午下午的显示，然后利用了 ::-webkit-calendar-picker-indicator 伪元素将原本的上午下午显示隐藏了起来。

效果演示

最终的效果如下：

结语

以上就是利用 CSS 实现没有上午下午的时间选择器的方法。既能满足用户的需求，又能在视觉上让用户更加舒适，非常实用。