自 Google Chrome v20 起，新日历已添加到日期输入中。这个问题是我正在使用 javascript 创建自己的日历，并且我的图标已经与默认的 chrome 箭头位于相同的位置。
我想知道如何删除箭头背景？
【问题讨论】：
标签： html google-chrome
据我所知，您目前无法禁用它。 这里有一个讨论： https://plus.google.com/102860501900098846931/posts/hTcMLVNKnec
也许他们会添加一些-webkit 选择器来控制样式。
现在您可能不得不改用<input type="text">。
编辑：
根据Jeremy's answer，现在可以移除箭头和旋转按钮。详情可见webkit.org：Styling Form Controls - WebKit
隐藏控件的 CSS 是：
<input type="date" class="unstyled" />
.unstyled::-webkit-inner-spin-button,
.unstyled::-webkit-calendar-picker-indicator {
display: none;
-webkit-appearance: none;
}
但是，这只会隐藏并且不会禁用本机日历！ - 您仍然可以通过按 Alt+向下箭头 来激活日历（至少在 Windows 上）。
要禁用，您需要添加一些 JavaScript，如上述 webkit.org 页面所述：
<input type="date" id="dateInput" class="unstyled" />
dateInput.addEventListener('keydown', function(event) {
if (event.keyIdentifier == "Down") {
event.preventDefault()
}
}, false);
您可以在 this jsfiddle 中看到它的工作原理。
【讨论】：
type=date 更具语义性。但在 Chrome（和 Opera！）提供禁用日历弹出窗口的选项之前，我们可能不得不改用 text。
datetime 没有在 Chrome 中实现。然而，它（在某种程度上）在 Safari 和 Opera 中实现，因此不是一个完美的解决方案。见这篇文章：swatelier.info/at/forms/dateTime.asp
在撰写本文时，webkit 已经引入了控件来处理这个问题：
input[type="date"]::-webkit-calendar-picker-indicator{
/* Your CSS here */
}
input[type="date"]::-webkit-inner-spin-button {
/* Your CSS here */
}
所以，对于这个特定的问题，应该是：
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-inner-spin-button{
display: none;
}
【讨论】：
::-webkit-calendar-picker-indicator { display: none; }，如 WebKit wiki 中所述。此外，如 jfrej 所示，您需要添加一些 JavaScript 来禁用键绑定。见trac.webkit.org/wiki/Styling%20Form%20Controls#Dateinputtype
添加到@jfrej：（暂时无法评论）
要杀死所有效果 chrome 适用于输入 您还需要清除“x”（清除）按钮。 ::-webkit-clear-button
防止显示默认文本。 哪个不是占位符或您可以使用的值 ::-webkit-datetime-edit-fields-wrapper 但要小心，你再也看不到价值了。
.unstyled::-webkit-clear-button {
display: none;
-webkit-appearance: none;
}
#dateInput:not([value])::-webkit-datetime-edit-fields-wrapper,
#dateInput[value=""]::-webkit-datetime-edit-fields-wrapper {
visibility: hidden;
}
【讨论】：
我不认为现在可以。他们正在研究一个名为Shadow DOM 的概念，它允许您操作和设置默认模板的样式。我相信它在 Chrome Canary 中可用，因此您可以尝试使用它。
【讨论】：
你可以这样写
input[type="date"]::-webkit-calendar-picker-indicator{
background-image: url(images/calendar-icon.png);
background-position: center;
background-size: 20px 20px;
background-repeat: no-repeat;
color: rgba(204,204,204,0);
}
通过将颜色属性设置为 0 不透明度，您将使箭头消失
【讨论】：
input[type="date"] {
&::-webkit-inner-spin-button,
&::-webkit-calendar-picker-indicator {
-webkit-appearance: none;
position: absolute;
right: 0;
opacity: 0;
}
width: 100%;
}
在这里，我在最右边有一个很棒的伪图标（插入符号）。因此，我将日历图标放在该位置，每当用户单击插入符号时，它都会执行不可见日历图标的功能
【讨论】：