Html 从 Google Chrome v20 中的日期输入中删除背景箭头
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11418289/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove background arrow from date input in Google Chrome v20
提问by Daniel Tavares
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.
自 Google Chrome v20 以来，新日历已添加到日期输入中。问题在于我正在使用 javascript 创建我自己的日历，并且我的图标已经与默认的 chrome 箭头位于相同的位置。
I was wondering how can I remove the arrow background?
我想知道如何删除箭头背景？
回答by jfrej
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
据我所知，您目前无法禁用它。这里有一个讨论：https: //plus.google.com/102860501900098846931/posts/hTcMLVNKnec
Perhaps they will add some -webkitselectors to control the styling.
也许他们会添加一些-webkit选择器来控制样式。
For now you might have to use <input type="text">instead.
现在你可能不得不<input type="text">改用。
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
根据Jeremy 的回答，现在可以移除箭头和旋转按钮。可以在 webkit.org 上找到详细信息：样式表单控件 - WebKit
The CSS to hidethe controls is:
隐藏控件的 CSS是：
<input type="date" class="unstyled" />
.unstyled::-webkit-inner-spin-button,
.unstyled::-webkit-calendar-picker-indicator {
display: none;
-webkit-appearance: none;
}
However, this will only hideand not disablethe native calendar! - you can still activate the calendar by pressing Alt+Down Arrow(at least on Windows).
但是，这只会隐藏而不是禁用本机日历！- 您仍然可以通过按Alt+来激活日历Down Arrow（至少在 Windows 上）。
To disable, you need to add a little JavaScript as described on the above webkit.org page:
要禁用，您需要添加一些 JavaScript，如上述 webkit.org 页面所述：
<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.
你可以看到它在这个 jsfiddle 中工作。
回答by Jeremy Ricketts
As of this writing, webkit has introduced controls to handle this:
在撰写本文时，webkit 已引入控件来处理此问题：
input[type="date"]::-webkit-calendar-picker-indicator{
/* Your CSS here */
}
input[type="date"]::-webkit-inner-spin-button {
/* Your CSS here */
}
So, for this particular issue, it would be:
因此，对于这个特定问题，它将是：
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-inner-spin-button{
display: none;
}
回答by Type-Style
adding to @jfrej: (cannot comment at the moment)
添加到@jfrej：（目前无法发表评论）
To kill all effects chrome applies to the input You need to clear the "x" (clear) Button too. ::-webkit-clear-button
要杀死所有效果 chrome 适用于输入您也需要清除“x”（清除）按钮。 ::-webkit-清除按钮
To prevent the showing of the default text. Which is not a placeholder or a value you can use ::-webkit-datetime-edit-fields-wrapperBut be carefull, you cannot see the value anymore.
防止显示默认文本。哪个不是占位符或您可以使用的值 ::-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;
}
回答by user5681092
You can put it like this
你可以这样说
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);
}
by putting the color attribute into 0 opacity you will make the arrow disappear
通过将颜色属性设置为 0 不透明度，您将使箭头消失
回答by Maurice
I don't think can right now. They are working on a concept called Shadow DOMwhich will allow you to manipulate and style the default templates. I believe it is available in Chrome Canary so you can try using that.
我不认为现在可以。他们正在研究一个名为Shadow DOM的概念，它允许您操作和设置默认模板的样式。我相信它在 Chrome Canary 中可用，因此您可以尝试使用它。
