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

Question

现在我的重点是让 Google Chrome 中的 input[type="date"] 显示日历图标 (.png)，而不是默认使用的向下三角形。我尝试在输入中使用styling the Shadow elements 做一些事情，但这需要我在所有其他元素周围移动，并且由于这些元素使用的是 flexbox，它看起来并不简单。我也希望一直显示日历图标，但我还没有想出办法。

Answer 1

下面的代码对我有用

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

<input type="date" />

Answer 2

@Aweary 有最好的例子，但 Chrome 59 不喜欢在 ::-webkit-calendar-picker-indicator 上使用 ::after。所以这是我使用 FontAwesome 图标进行的调整，以达到相同的目标。

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

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

<input type="date">

Answer 3

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

.sd-container {
  position: relative;
  float: left;
}

.sd {
  padding: 5px 10px;
  height: 30px;
  width: 150px;
}

.open-button {
  position: absolute;
  top: 10px;
  right: 11px;
  width: 25px;
  height: 25px;
  background: #fff;
  pointer-events: none;
}

.open-button button {
  border: none;
  background: transparent;
}

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

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

Answer 4

Here you go.

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

喜欢材料设计？使用此代码（仅适用于 Chrome 和 Safari）。

想要将选择器限制为日期（不是月份或本地日期时间）？在选择器之前添加 input[type="date"]。

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

::-webkit-search-cancel-button,
::-webkit-clear-button {
  -webkit-appearance: none;
  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="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"/%3E%3Cpath d="M0 0h24v24H0z" fill="none"/%3E%3C/svg%3E');
  color: rgba(0, 0, 0, 0.54);
  cursor: pointer;
  height: 1.5rem;
  margin-right: 0;
  width: 1.5rem;
}

::-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: .5rem;
}
::-webkit-calendar-picker-indicator:hover {
  -webkit-box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.04);
          box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.04);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">

<div class="container">
  <div class="row my-4">
    <div class="col">
      <div class="form-group">
        <label for="exampleInput2bis">Date</label>
        <input class="form-control" id="exampleInput2bis" placeholder="Date" type="date">
      </div>
    </div>
  </div>
</div>