Kullanıcının formu başarıyla doldurmasına yardımcı olmak için otomatik olarak doldurulan (veya doldurulmayan) alanları vurgulamak üzere CSS :autofill özelliğini kullanın.
Nasıl uygulanır?
Tarayıcı tarafından otomatik olarak doldurulan (ve kullanıcı tarafından düzenlenmeyen) bir form alanını vurgulamak için :autofill sınıfını kullanarak CSS'nize bir seçici ekleyin. Bu, <input>, <select> veya <textarea> öğesi için kullanılabilir.
Otomatik doldurulan durumları stillendirirken erişilebilirlikle ilgili en iyi uygulamalara uymanız gerekir:
- Birden fazla durum göstergesi: Otomatik doldurma durumunu belirtmek için yalnızca kenarlık rengine güvenmeyin. Durumun algılanabilir olmasını sağlamak için kenarlık kalınlığı ve özel arka plan gölgeleme gibi birden fazla gösterge kullanın.
- Odak göstergelerini koruyun: Klavye kullanıcıları için net ve yüksek kontrastlı bir alternatif sunmadan odak ana hatlarını (
outline: none) asla kaldırmayın.
Aşağıdaki örnekte, özel bir kenarlık ve arka plan ile açık odak stilleri ayarlamak için :autofill kullanılmaktadır:
input:autofill,
input:-webkit-autofill {
/* Multiple indicators: use both a distinct border and background color via box-shadow to avoid color-only state */
border: 2px solid #2e7d32;
box-shadow: 0 0 0 100vmax #e8f5e9 inset;
}
/* MANDATORY: Always provide an explicit focus indicator when styling autofilled states */
input:autofill:focus-visible,
input:-webkit-autofill:focus-visible {
outline: 3px solid #000;
outline-offset: 2px;
}
Bu örnekte gösterildiği gibi, background-color doğrudan otomatik doldurulan alanlarda geçersiz kılınamadığından arka planı özelleştirmek için box-shadow özelliği kullanılır.
Doğru CSS sözde sınıf adını kullanın
:auto-fill kullanmayın: Bu kullanım yanlıştır.
ZORUNLU: Doğru sözde sınıf adı olduğu için :autofill kullanın.
Yedek stratejiler
:autofill sözde sınıfı, progresif bir geliştirmedir. Bu özelliği desteklemeyen tarayıcılarda form normal şekilde çalışmaya devam eder ancak girişler özel otomatik doldurma vurgulamasını almaz. Kullanıcılar formu başarıyla doldurmaya devam edebilir. Ek JavaScript yedekleri kullanılmamalıdır.