如果单击 html5 日期输入上的向下箭头,是否可以设置弹出日历的样式?
<form>
<label for="f-duedate">Due date</label>
<input id="f-duedate" type="date" name="duedate"
data-date-format="dd.mm.YYYY">
</form>
http://jsfiddle.net/no8a17eo/1/
我知道有伪选择器可以为输入字段本身设置样式:
::-webkit-datetime-edit-fields-wrapper {
}
::-webkit-datetime-edit-text {
}
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-year-field {
}
::-webkit-inner-spin-button {
display: none;
}
::-webkit-calendar-picker-indicator:hover {
background:none;
}
至少我只需要它在最新版本的 Google Chrome 上工作
最佳答案
根据Google的FAQ,目前没有办法修改样式: https://developers.google.com/web/updates/2012/08/Quick-FAQs-on-input-type-date-in-Google-Chrome
How do I change the appearance of the date picker?
You cannot currently style the appearance of the date picker. In WebKit, we have previously provided ways to style form controls with the -webkit-appearance CSS property or the ::-webkit-foo pseudo class selector. However the calendar popup does not provide such ways in WebKit because it is separate from the document, like a popup menu for , and there is not currently a standard for how to control styling on its sub-elements.
你只能继续使用 Chrome 的渲染,或者在 input type="text"
字段上使用自定义库来防止冲突
关于用于在 Chrome 中设置 HTML5 日期输入日历样式的 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28738112/