如何改变输入类型＝“日期”的外观？日期选择器？ [英] How to change the appearance of input type="date" datepicker?

问题描述

我想将输入类型= date日期选择器的默认外观从箭头更改为日历图标，并使其始终可见。

I would like to change the default appearance of the input type="date" datepicker from an arrow to a calendar icon and make it visible at all times.

Google搜索此问题很少。我碰到了以下2012年发布的帖子，该帖子说不可能，是否已更改？

Google searching this issue revealed very little. I came across the below post from 2012 which says its not possible, have things changed?

https://developers.google.com/web/updates/2012/08/Quick -FAQs-on-input-type-date-in-Google-Chrome

推荐答案

尝试以下代码：

HTML

<div>
    <h1>PURE CSS DATE PICKER</h1>
    <label for="dateofbirth">Date Of Birth</label>
    <input type="date" name="dateofbirth" id="dateofbirth">
</div>

CSS

[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;
}

您还可以尝试启动datepicker： Bootstrap Datepicker

You can also try bootstrap datepicker: Bootstrap Datepicker

这篇关于如何改变输入类型＝“日期”的外观？日期选择器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！