从 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
选择器来控制样式.
现在您可能必须使用 代替.
根据 Jeremy 的回答,现在可以移除箭头和旋转按钮.可以在 webkit.org 上找到详细信息:样式表单控件 - WebKit
隐藏控件的 CSS 是:
.unstyled::-webkit-inner-spin-button,.unstyled::-webkit-calendar-picker-indicator {显示:无;-webkit 外观:无;}
但是,这只会隐藏并且不会禁用本机日历!- 您仍然可以通过按 Alt+向下箭头(至少在 Windows 上)来激活日历.
要禁用,您需要添加一些 JavaScript,如上述 webkit.org 页面所述:
dateInput.addEventListener('keydown', function(event) {if (event.keyIdentifier == "Down") {event.preventDefault()}}, 错误的);
你可以在这个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屋!