从Google Chrome v20中的日期输入中移除背景箭头 [英] Remove background arrow from date input in Google Chrome v20

问题描述

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

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

解决方案

据我所知，您目前无法禁用它。
此处有讨论：
https://plus.google .com / 102860501900098846931 / posts / hTcMLVNKnec

也许他们会添加一些 -webkit 选择器来控制现在你可能不得不使用< input type =text> 来代替。

编辑： stackoverflow.com/a/15373370/206614\"> Jeremy的回答，现在可以删除箭头和旋转按钮。可以在webkit.org上找到详细信息：样式表单控件 - WebKit

要隐藏的控件是：

 < input type =dateclass =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 =dateInputclass =unstyled/> 
 
 dateInput.addEventListener（'keydown'，function（event）{
 if（event.keyIdentifier ==Down）{
 event.preventDefault（）
 } 
}，false）; 
  

你可以在 this jsfiddle 。

Since Google Chrome v20 a new calendar has been added to date inputs. The issue with this is that I'm using javascript to create my own calendar and I have an icon already in the same position as the default chrome arrow.

I was wondering how can I remove the arrow background?

解决方案

As far as I know you can't disable it at the moment. There is a discussion going on here: https://plus.google.com/102860501900098846931/posts/hTcMLVNKnec

Perhaps they will add some -webkit selectors to control the styling.

For now you might have to use <input type="text"> instead.

EDIT:

As per Jeremy's answer, it is now possible to remove the arrow and spin buttons. Details can be found on webkit.org: Styling Form Controls - WebKit

The CSS to hide the controls is:

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

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

However, this will only hide and not disable the native calendar! - you can still activate the calendar by pressing Alt+Down Arrow (at least on Windows).

To disable, you need to add a little JavaScript as described on the above webkit.org page:

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

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

You can see it working in this jsfiddle.

这篇关于从Google Chrome v20中的日期输入中移除背景箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！