从 Google Chrome v20 中的日期输入中删除背景箭头
Posted
技术标签:
【中文标题】从 Google Chrome v20 中的日期输入中删除背景箭头【英文标题】:Remove background arrow from date input in Google Chrome v20 【发布时间】:2012-07-10 05:21:22 【问题描述】:自 Google Chrome v20 起,新日历已添加到日期输入中。这个问题是我正在使用 javascript 创建自己的日历,并且我的图标已经与默认的 chrome 箭头位于相同的位置。
我想知道如何删除箭头背景?
【问题讨论】:
你能发布你的html吗? @Nik 我正在使用一个简单的 。在网络上的其他任何地方应用时也可以看到这一点。 ***.com/questions/29436074/… jsbin.com/gagojuradu/edit?html,css,js,output 【参考方案1】:据我所知,您目前无法禁用它。 这里有一个讨论: https://plus.google.com/102860501900098846931/posts/hTcMLVNKnec
也许他们会添加一些-webkit
选择器来控制样式。
现在您可能不得不改用<input type="text">
。
编辑:
根据Jeremy's answer,现在可以移除箭头和旋转按钮。详情可见webkit.org:Styling Form Controls - WebKit
隐藏控件的 CSS 是:
<input type="date" class="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="dateInput" class="unstyled" />
dateInput.addEventListener('keydown', function(event)
if (event.keyIdentifier == "Down")
event.preventDefault()
, false);
您可以在 this jsfiddle 中看到它的工作原理。
【讨论】:
感谢您的回答,我不想删除输入的语义值,但由于我将使用自定义日期选择器,我想这没关系。 是的,这正是我的问题 -type=date
更具语义性。但在 Chrome(和 Opera!)提供禁用日历弹出窗口的选项之前,我们可能不得不改用 text
。
使 type='datetime' 不会在 Chrome 中显示日历弹出窗口,也会在 IE 中保留日期验证。
是的,但这是因为 datetime
没有在 Chrome 中实现。然而,它(在某种程度上)在 Safari 和 Opera 中实现,因此不是一个完美的解决方案。见这篇文章:swatelier.info/at/forms/dateTime.asp
这根本不是在回答问题。主要问题是只删除箭头,而不是整个 html5 日期选择器。【参考方案2】:
在撰写本文时,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;
【讨论】:
需要注意的是,这实际上并没有移除旋转按钮。推荐的解决方法是::-webkit-calendar-picker-indicator display: none;
,如 WebKit wiki 中所述。此外,如 jfrej 所示,您需要添加一些 JavaScript 来禁用键绑定。见trac.webkit.org/wiki/Styling%20Form%20Controls#Dateinputtype【参考方案3】:
添加到@jfrej:(暂时无法评论)
要杀死所有效果 chrome 适用于输入 您还需要清除“x”(清除)按钮。 ::-webkit-clear-button
防止显示默认文本。 哪个不是占位符或您可以使用的值 ::-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/
【讨论】:
【参考方案4】:我不认为现在可以。他们正在研究一个名为Shadow DOM 的概念,它允许您操作和设置默认模板的样式。我相信它在 Chrome Canary 中可用,因此您可以尝试使用它。
【讨论】:
【参考方案5】:你可以这样写
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 不透明度,您将使箭头消失
【讨论】:
【参考方案6】: input[type="date"]
&::-webkit-inner-spin-button,
&::-webkit-calendar-picker-indicator
-webkit-appearance: none;
position: absolute;
right: 0;
opacity: 0;
width: 100%;
在这里,我在最右边有一个很棒的伪图标(插入符号)。因此,我将日历图标放在该位置,每当用户单击插入符号时,它都会执行不可见日历图标的功能
【讨论】:
以上是关于从 Google Chrome v20 中的日期输入中删除背景箭头的主要内容,如果未能解决你的问题,请参考以下文章
dd-mm-yyyy Google Chrome 的日期验证错误 [重复]
是否可以通过扩展从另一个进程外部触发 Google Chrome 中的 Javascript?