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

Question

现在我专注于让input[type="date"]谷歌浏览器显示日历图标(.png),而不是默认使用的向下三角形.我试图在输入中设置阴影元素的样式,但这需要我转移所有其他元素,因为那些使用的是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 属性在此处进行了说明。 HTML5 日期选择器是否有任何样式选项？

Answer 4

在这里你去.

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