在Chrome中的HTML时间输入字段上隐藏图标 [英] Hide the icon on a HTML time input field in Chrome

问题描述

在Chrome中，当您将type="time"属性设置为输入框时，输入旁边会显示一个小图标时钟图标.有没有办法删除这个小时钟图标?

In Chrome when you type="time" property to an input box you get a little icon clock icon next to the input. Is there a way of removing this little clock icon?

推荐答案

基于此问题的答案: 将日期输入三角形更改为日历图标

Based on the answers to this question: Change date input triangle to a calendar icon

我们可以看到我们需要覆盖-webkit-calendar-picker-indicator伪元素，例如:

We can see that we need to override the -webkit-calendar-picker-indicator pseudo-element, for example:

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

默认情况下，它在Chrome浏览器中

Here it is in Chrome by default

这是-webkit-calendar-picker-indicator背景无​​

Here it is with -webkit-calendar-picker-indicator background none

当然，您隐藏了一个可点击的选择器这一事实，因此，如果它是只读的或进行更多样式设置，您可能要重新考虑一下如何显示它.

Of course you're hiding the fact there is a clickable picker so you may well want to think again about how you're displaying this if it's read only or do some more styling

这篇关于在Chrome中的HTML时间输入字段上隐藏图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！