37

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

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

显示带有箭头的下拉菜单的图像

4

6 回答 6

75

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

于 2012-07-10T17:29:27.943 回答
30

在撰写本文时，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;
}
于 2013-03-12T22:19:24.113 回答
13

添加到@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/

于 2015-02-26T16:57:40.960 回答
2

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

于 2012-07-10T17:57:46.183 回答
2

你可以这样说

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 不透明度，您将使箭头消失

于 2015-12-15T08:01:03.830 回答
0 
 input[type="date"] {
        &::-webkit-inner-spin-button,
        &::-webkit-calendar-picker-indicator {
            -webkit-appearance: none;
            position: absolute;
            right: 0;
            opacity: 0;
        }
        width: 100%;
    }

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

于 2020-09-07T21:51:15.680 回答