Question

现在我专注于让谷歌浏览器中的input[type="date"]显示日历图标（.png），而不是默认情况下使用的向下三角形。我试图在输入中使用styling the Shadow elements做一些事情，但这需要我转移所有其他元素，因为那些是使用flexbox，它似乎不是很简单。我希望还能一直显示日历图标，但我还没有想出办法。

Answer 1

以下代码适用于我

＆＃13;

input[type="date"]::-webkit-calendar-picker-indicator {
    color: rgba(0, 0, 0, 0);
    opacity: 1;
    display: block;
    background: url(https://mywildalberta.ca/images/GFX-MWA-Parks-Reservations.png) no-repeat;
    width: 20px;
    height: 20px;
    border-width: thin;
}

＆＃13;

<input type="date" />

＆＃13;

Answer 2

Here you go

Chrome为其日期选择器提供伪元素。我们可以使用::-webkit-calendar-picker-indicator以及元素上的另一个伪元素来隐藏当前三角形并覆盖我们选择的PNG。

::-webkit-calendar-picker-indicator {

  color: rgba(0, 0, 0, 0);
  opacity: 1
}

::-webkit-calendar-picker-indicator::after {

  content: '';
  display: block;
  background: url(/*yourURLHere*/) no-repeat;
  background-size: 10%;
  width: 100px;
  height: 100px;
  position: absolute;
  transform: translateX(-2%);

}

你可以自己调整定位和所有这些，但你要做的主要是通过将其alpha通道设置为0来清除当前指示器，然后在指示器元素之后添加一个伪元素显示你的png。

您还可以通过将opacity设置为1来始终显示图标。

Answer 3

@Aweary有最好的例子，但Chrome 59不喜欢在:: :: webkit-calendar-picker-indicator之后使用::。所以这是我使用FontAwesome图标实现相同目标的调整。

＆＃13;

input[type="date"] {
  position: relative;
  padding: 10px;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  color: transparent;
  background: none;
  z-index: 1;
}

input[type="date"]:before {
  color: transparent;
  background: none;
  display: block;
  font-family: 'FontAwesome';
  content: '\f073';
  /* This is the calendar icon in FontAwesome */
  width: 15px;
  height: 20px;
  position: absolute;
  top: 12px;
  right: 6px;
  color: #999;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<input type="date">

＆＃13;

Answer 4

更多跨浏览器的替代方案是将日历图标放在三角形日历选择器指示器的顶部，然后将日历图标设置为pointer-events: none，这将导致所有点击事件传递到三角形日历选择器指示下面。我不完全确定日历选择器指示器在不同浏览器中的位置是否一致但它应该非常相似。请参阅下面的示例。

＆＃13;

.sd-container {
  position: relative;
  float: left;
}

.sd {
  padding: 5px 10px;
  height: 30px;
  width: 150px;
}

.open-button {
  position: absolute;
  top: 11px;
  right: 3px;
  width: 25px;
  height: 25px;
  background: #fff;
  pointer-events: none;
}

.open-button button {
  border: none;
  background: transparent;
}

＆＃13;

<form>
  <div class="sd-container">
    <input class="sd" type="date" name="selected_date" />
    <span class="open-button">
      <button type="button"></button>
    </span>
  </div>
</form>

＆＃13;

此外，还可以更改日期输入字段（但不是日历日期选择器）的某些外观，因为它的样式类似于文本输入字段。此外，它们还有许多WebKit CSS属性，这些属性在此处进行了解释Are there any style options for the HTML5 Date picker?

Answer 5

热爱材料设计？用这个

仅适用于日期（不适用于月份或本地日期时间）？在选择器之前添加输入[type =“ date”]。

只需复制粘贴此CSS并将其添加到您自己的CSS代码中即可。

::-webkit-calendar-picker-indicator {
    color: rgba(0, 0, 0, 0);
    opacity: 1;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg fill="%23000" fill-opacity=".54" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/%3E%3Cpath d="M0 0h24v24H0z" fill="none"/%3E%3C/svg%3E');
    width: 14px;
    height: 18px;
    cursor: pointer;
    border-radius: 50%;
    margin-left: 4px;
}

::-webkit-calendar-picker-indicator:hover {
    box-shadow: 0 0 0 4px rgba(0, 0, 0, .04);
}

将日期输入三角形更改为日历图标

5 个答案: