Canlı incele Formlar
Active Filled State Input
Input that highlights when it has content using :not(:placeholder-shown).
- Stok kodu
- form-switch-cyber
- Lisans
- Ücretsiz
Canlı önizleme herkese açıktır. Kod sekmeleri, kopyalama, kaynak API'si ve izole önizleme belgesi üyelik gerektirir.
Üyelik gerekli
Kaynak kodu görmek için ücretsiz üye ol
HTML, CSS, React çıktısı, kopyalama ve tarayıcı editörü giriş yaptıktan sonra açılır.
Bu efektte bir sorun mu var, yoksa daha iyisini mi yazdın? Düzeltme gönder — onaylanırsa puan kazanırsın.
Sorun bildir veya düzeltKatkıda bulunanlar
LibraryCSSEfekti eklediKurucu
Kullanılan teknikler
Bu efektte kullanılan CSS teknikleri — her biri canlı örnekli bir rehbere ya da özelliğin referans sayfasına bağlanır.
Rehberler
CSS referansı
Cyber Switch nasıl kullanılır?
- 1. HTML parçasını sayfanda kullanmak istediğin yere yapıştır.
- 2. CSS bloğunu stil dosyana veya bir
<style>etiketine ekle. - 3. Renkleri ve süreleri kendi tasarımına göre değiştir — bağımlılık yok, saf CSS.
Formlar kategorisindeki tüm efektler gibi bu efekt de tamamen ücretsizdir; ticari projelerde de kullanabilirsin. Kütüphanenin tamamı için Formlar koleksiyonuna göz at.
Benzer form efektleri
TümüCanlı incele Formlar
Slide Left Floating Label
Label slides left then up when input receives focus.
Canlı incele Formlar
Custom Select Arrow
A native select stripped of its default arrow, with a chevron that flips on focus.
Canlı incele Formlar
Search Input with Loading
Search input that shows a loading spinner when typing.
Canlı incele Formlar
Canlı incele Formlar
Error State Input
Input with full error state — red border, X icon, and shake.
Canlı incele Formlar
Canlı incele Formlar