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

Question

自Google Chrome v20以来,日历输入中添加了新日历.这个问题是我使用javascript创建自己的日历,我的图标已经与默认的chrome箭头位于相同的位置.

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

Answer 1

据我所知,目前无法禁用它.这里有一个讨论:https: //plus.google.com/102860501900098846931/posts/hTcMLVNKnec

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

现在你可能不得不使用<input type="text">.

编辑:

根据Jeremy的回答,现在可以删除箭头和旋转按钮.详细信息可以在webkit.org上找到:样式表单控件 - WebKit

隐藏控件的CSS 是:

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

.unstyled::-webkit-inner-spin-button,
.unstyled::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

但是,这只会隐藏而不会禁用本机日历!- 您仍然可以按Alt+ Down Arrow(至少在Windows上)激活日历.

要禁用,您需要添加一些JavaScript,如上面的webkit.org页面所述:

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

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

你可以看到它在这个jsfiddle中工作.

Answer 2

在撰写本文时,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;
}

Answer 3

添加到@jfrej :( 暂不评论)

要杀死所有效果,Chrome适用于输入您还需要清除"x"(清除)按钮. :: - WebKit的透明按钮

防止显示默认文本.哪个不是占位符或可以使用的值 :: - 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;
}

http://fiddle.jshell.net/RgY3t/66/