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

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

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

---

据我所知，您目前无法禁用它。 这里正在进行讨论：

也许他们会添加一些

-webkit

选择器来控制样式

现在，您可能需要使用

编辑：

根据，现在可以移除箭头和旋转按钮。有关详细信息，请访问webkit.org：

隐藏控件的CSS是：

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

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

.unstyled:：-webkit内部旋转按钮，
.unstyled:：-webkit日历选择器指示器{
显示：无；
-webkit外观：无；
}

但是，这只会隐藏并且不会禁用本机日历您仍然可以通过按Alt+向下箭头来激活日历（至少在Windows上）

要禁用，您需要添加一点JavaScript，如上面webkit.org页面所述：

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

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

dateInput.addEventListener（'keydown'，函数（事件）{
如果（event.keyIdentifier==“向下”）{
event.preventDefault（）
}
}，假）；

---

你可以看到它正在工作。

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

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

添加到@jfrej：（目前无法评论）

要消除所有效果，chrome将应用于输入 您还需要清除“x”（清除）按钮。 ：-webkit清除按钮

以防止显示默认文本。 它不是占位符或您可以使用的值 ：-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;
}

---

你可以这样说

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

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

---

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

请发布您的html。@Nik我使用的是简单的。这在应用于web上的任何其他位置时也可见。感谢您的回答，我不想删除输入的语义值，但由于我将使用自定义日期选择器，我想这无关紧要。是的，这正是我的问题-

type=date

更具语义。但是，在Chrome（和Opera！）提供禁用日历弹出窗口的选项之前，我们可能必须使用

文本

。在Chrome中设置type='datetime'不会显示日历弹出窗口，也会在IE中保留日期验证。是的，但这是因为

日期时间

未在Chrome中实现。然而，它（在某种程度上）是在Safari和Opera中实现的，因此不是一个完美的解决方案。看这篇文章：这根本没有回答这个问题。主要的问题是只删除箭头，而不是整个html5日期选择器。应该注意的是，这实际上并没有删除旋转按钮。建议的修复方法是

：：-webkit日历选择器指示符{display:none；}

，如webkit wiki上所述。另外，正如jfrej所指出的，您需要添加一些JavaScript来禁用键绑定。看见