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

由于Google Chrome v20在日期输入中添加了新的日历。这个问题是我正在使用javascript来创建自己的日历，而且我的图标已经和默认的chrome箭头处于相同的位置。

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

解决方法

据我所知，你现在不能禁用它。
这里有一个讨论：
https://plus.google.com/102860501900098846931/posts/hTcMLVNKnec

也许他们会添加一些-webkit选择器来控制样式。

现在您可能需要使用< input type =“text”>代替。

另外，看看这篇文章：
http://joewlarson.com/blog/2012/04/18/html5-date-input-field-concerns/

编辑：

根据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 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工作。