html - 从 Google Chrome v20 中的日期输入中删除背景箭头

Question

自 Google Chrome v20 以来，已将新日历添加到日期输入中。这个问题是我正在使用 javascript 创建我自己的日历，并且我有一个图标已经位于与默认 chrome 箭头相同的位置。

我想知道如何去除箭头背景？

Answer 1

据我所知，您目前无法禁用它。这里正在进行讨论: 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;
}

但是，这只会隐藏并且不会禁用 native 日历! - 您仍然可以通过按 Alt+向下箭头(至少在 Windows 上)来激活日历。

要禁用，您需要按照上述 webkit.org 页面中的说明添加一些 JavaScript:

<input type="date" id="dateInput" class="unstyled" />

dateInput.addEventListener('keydown', function(event) {
    if (event.keyIdentifier == "Down") {
        event.preventDefault()
    }
}, false);

您可以在 this jsfiddle 中看到它在工作.