HTML5 Tarih seçici için herhangi bir stil seçeneği var mı?

HTML5 tarih seçici konusunda gerçekten çok heyecanlıyım. W3C'nin nihayet boşluğun bir kısmını topladığını bilmek ferahlatıcı, bu yüzden bu kadar yaygın bir girdi biçimini yeniden icat etmeye devam etmemize gerek yok.

Uyarı, renk seçicinin kendisine uygulama biçiminde pek bir şey görmüyorum veya öngörmüyorum, bu da çoğu sitede tarih seçici türünün bir anlaşma-kırıcı kullanımını sağlayacak. İnsanların <select>güzelleştirememesi gibi basit bir nedenden ötürü yaygın javascript değiştirme korsanlarından muzdariptir. W3C diyarında neler olduğunu bilen var mı merak ediyorum?

Bu biraz daha büyük bir soruyla eşleştirilmiştir (cevabı biliyorsanız): Bunlardan bazılarının gün ışığını görmesi için W3C veya WHATWG ile ilgilenmeye zaman ayırmaya değer mi? Her türlü içgörü faydalıdır.

Aşağıdaki sekiz sözde öğe, bir tarih girişinin metin kutusunu özelleştirmek için WebKit tarafından kullanıma sunulur:

::-webkit-datetime-edit
::-webkit-datetime-edit-fields-wrapper
::-webkit-datetime-edit-text
::-webkit-datetime-edit-month-field
::-webkit-datetime-edit-day-field
::-webkit-datetime-edit-year-field
::-webkit-inner-spin-button
::-webkit-calendar-picker-indicator

Dolayısıyla, tarih girişinin daha fazla boşluk ve saçma bir renk şeması kullanabileceğini düşünüyorsanız, aşağıdakileri ekleyebilirsiniz:

::-webkit-datetime-edit { padding: 1em; }
::-webkit-datetime-edit-fields-wrapper { background: silver; }
::-webkit-datetime-edit-text { color: red; padding: 0 0.3em; }
::-webkit-datetime-edit-month-field { color: blue; }
::-webkit-datetime-edit-day-field { color: green; }
::-webkit-datetime-edit-year-field { color: purple; }
::-webkit-inner-spin-button { display: none; }
::-webkit-calendar-picker-indicator { background: orange; }

<input type="date">

Şu anda, yerel bir tarih seçicinin stilini belirlemenin komut dosyası içermeyen çapraz tarayıcı bir yolu yoktur.

WHATWG / W3C'de neler olup bittiğine gelince ... Bu işlevsellik ortaya çıkarsa, muhtemelen CSS-UI standardı veya Shadow DOM ile ilgili bazı standartlar altında olacaktır . CSS4 UI wiki sayfası listeleri CSS3-UI çıkarılmış, ama dürüst olmak gerekirse birkaç görünüm-ilişkili şeyler CSS-UI modülünde ilgi büyük anlaşma olması görünmüyor.

Şu anda tarayıcılar arası geliştirme için en iyi seçeneğinizin JavaScript tabanlı arayüzle güzel kontroller uygulamak ve ardından HTML5 yerel kullanıcı arayüzünü devre dışı bırakmak ve onu değiştirmek olduğunu düşünüyorum. Gelecekte belki daha iyi yerel kontrol stilleri olacağını düşünüyorum, ancak muhtemelen kendi Shadow DOM "widget'ınız" için yerel bir kontrolü değiştirme yeteneği daha fazla olacaktır.

Bunun mevcut olmaması can sıkıcıdır ve standart destek için dilekçe vermek her zaman değerlidir. JQuery UI'sinin lideri denemiş ve başarısız olmuş gibi görünse de .

Bunların hepsi çok cesaret kırıcı olsa da, HTML5 tarih seçicinin avantajlarını ve ayrıca özel stillerin neden zor olduğunu ve belki de kaçınılması gerektiğini de dikkate almaya değer. Bazı platformlarda, tarih seçici son derece farklı görünüyor ve kişisel olarak yerel veri seçiciyi şekillendirmenin genel bir yolunu düşünemiyorum.

bunu Zurb'un github'ında buldum

Biraz daha özel stil yapmak istemeniz durumunda. Tarih bileşenlerinin webkit ile oluşturulması için tüm varsayılan CSS burada verilmiştir.

input[type="date"] {
     -webkit-align-items: center;
     display: -webkit-inline-flex;
     font-family: monospace;
     overflow: hidden;
     padding: 0;
     -webkit-padding-start: 1px;
}

input::-webkit-datetime-edit {
    -webkit-flex: 1;
    -webkit-user-modify: read-only !important;
    display: inline-block;
    min-width: 0;
    overflow: hidden;
}

input::-webkit-datetime-edit-fields-wrapper {
    -webkit-user-modify: read-only !important;
    display: inline-block;
    padding: 1px 0;
    white-space: pre;
}

Bu çözüme ulaşmak için yukarıdaki çözümlerin bir kombinasyonunu ve bazı deneme yanılma yöntemlerini kullandım. Can sıkıcı bir zaman aldı, bu yüzden gelecekte başka birine yardımcı olabileceğini umuyorum. Ayrıca tarih seçici girişinin Safari tarafından desteklenmediğini de fark ettim ...

Aşağıdaki resimde gösterildiği gibi şeffaf bir tarih seçici girdisi oluşturmak için stilli bileşenler kullanıyorum:

const StyledInput = styled.input`
  appearance: none;
  box-sizing: border-box;
  border: 1px solid black;
  background: transparent;
  font-size: 1.5rem;
  padding: 8px;
  ::-webkit-datetime-edit-text { padding: 0 2rem; }
  ::-webkit-datetime-edit-month-field { text-transform: uppercase; }
  ::-webkit-datetime-edit-day-field { text-transform: uppercase; }
  ::-webkit-datetime-edit-year-field { text-transform: uppercase; }
  ::-webkit-inner-spin-button { display: none; }
  ::-webkit-calendar-picker-indicator { background: transparent;}
`

Giriş öğesinin stilini belirlemek için aşağıdaki CSS'yi kullanabilirsiniz.

input[type="date"] {
  background-color: red;
  outline: none;
}

input[type="date"]::-webkit-clear-button {
  font-size: 18px;
  height: 30px;
  position: relative;
}

input[type="date"]::-webkit-inner-spin-button {
  height: 28px;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  font-size: 15px;
}

<input type="date" value="From" name="from" placeholder="From" required="" />

Bilginize, ben gibi özelliklere sahip mümkün görünmüyordu takvim simgenin rengini güncelleştirmek için gerekli color,fill vb

Sonunda bazı filterözelliklerin simgeyi ayarlayacağını anladım, bu yüzden onu nasıl herhangi bir renk haline getireceğimi bulamadım, neyse ki ihtiyacım olan tek şey onu karanlık bir arka planda görünecek şekilde yapmaktı, böylece yapabildim aşağıdakileri yapın:

body { background: black; }

input[type="date"] { 
  background: transparent;
  color: white;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(100%);
}

<body>
 <input type="date" />
</body>

Umarım bu, bazı insanlara yardımcı olurken, çoğu durumda krom doğrudan bunun imkansız olduğunu söylüyor.