我想将输入 type="date" 日期选择器的默认外观从箭头更改为日历图标，并使其始终可见。
谷歌搜索这个问题并没有透露什么信息。我在 2012 年看到了下面的帖子，上面说这是不可能的，事情有变化吗？
https://developers.google.com/web/updates/2012/08/Quick-FAQs-on-input-type-date-in-Google-Chrome https://developers.google.com/web/updates/2012/08/Quick-FAQs-on-input-type-date-in-Google-Chrome
尝试以下代码：
[type="date"] {
background: #fff url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/calendar_2.png) 97% 50% no-repeat;
}
[type="date"]::-webkit-inner-spin-button {
display: none;
}
[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0;
}
/* custom styles */
body {
padding: 4em;
background: #e5e5e5;
font: 13px/1.4 Geneva, 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
}
label {
display: block;
}
input {
border: 1px solid #c4c4c4;
border-radius: 5px;
background-color: #fff;
padding: 3px 5px;
box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.1);
width: 190px;
}
<div>
<h1>PURE CSS DATE PICKER</h1>
<label for="dateofbirth">Date Of Birth</label>
<input type="date" name="dateofbirth" id="dateofbirth">
</div>
您还可以尝试引导日期选择器：Bootstrap 日期选择器 https://bootstrap-datepicker.readthedocs.io/en/latest/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
