Ändern Sie das Datum-input-Dreieck, um ein Kalender-icon

Jetzt konzentriere ich mich auf die input[type="date"] in Google Chrome die Anzeige eines Kalender-Symbol (.png) statt dem Dreieck nach unten, es wird standardmäßig verwendet. Ich habe versucht, etwas zu tun mit das styling der Shadow Elemente im Eingang, aber das erfordert, dass ich um Verschiebung alle anderen Elemente und da die in der Verwendung von flexbox, es scheint nicht sehr einfach. Ich bin auf der Suche, um auch über das Kalender-icon angezeigt werden die ganze Zeit, aber ich habe nicht herausgefunden, wie man das doch machen.

InformationsquelleAutor Ilan Biala | 2015-04-03

  1. 5

    Hier gehen Sie.

    Chrome bietet die pseudo-Elemente für Ihre Datum-picker. Wir können ::-webkit-calendar-picker-indicator zusammen mit anderen pseudo-element auf , dass - element zum ausblenden des aktuellen Dreiecks und overlay PNG unserer Wahl.

    ::-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%);

}

    Können Sie zwicken die Positionierung und alle, die sich selbst, aber die wichtigste Sache, die Sie tun müssen, ist die aktuelle Anzeige deaktivieren, indem Sie seine alpha Kanal auf 0, dann das hinzufügen eines pseudo-Elements, nachdem der Indikator element, zeigen Sie Ihre png.

    Können Sie auch das Symbol sichtbar zu allen Zeiten durch Einstellung der opacity zu 1.

    InformationsquelleAutor Aweary

Schreibe einen Kommentar