从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;
}

但是，这只会隐藏并且不会禁用原生日历！ - 您仍然可以按 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中看到它。

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-clear-button

防止显示默认文字。 哪个不是占位符或您可以使用的值 :: - WebKit的日期时间 - 编辑字段-包装 但要小心，你再也看不到它了。

.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/

Answer 4

我认为现在不能。他们正在开发一个名为Shadow DOM的概念，它允许您操作和设置默认模板的样式。我相信它可以在Chrome Canary中使用，因此您可以尝试使用它。

Answer 5

你可以这样说吧

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);
}

通过将color属性设置为0不透明度，您将使箭头消失

Answer 6

 input[type="date"] {
        &::-webkit-inner-spin-button,
        &::-webkit-calendar-picker-indicator {
            -webkit-appearance: none;
            position: absolute;
            right: 0;
            opacity: 0;
        }
        width: 100%;
    }

在这里，我最右边有一个字体很棒的伪图标（插入符号）。因此，我将日历图标放置在该位置，每当用户单击插入符号时，它将执行不可见日历图标的功能