<div class="radikalwp-in-float"><input type="text" placeholder=" " value=""><label>نام کامل شما<//label><//div>
.radikalwp-in-float { position: relative; width: 280px; font-family: inherit; }
.radikalwp-in-float input {
width: 100%;
padding: 15px 14px 7px;
font-family: inherit;
font-size: 14px;
color: #1e293b;
background: #fff;
border: 1.5px solid #e2e8f0;
border-radius: 11px;
outline: none;
transition: border-color .3s ease;
}
.radikalwp-in-float input:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, .12); }
.radikalwp-in-float label {
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
font-size: 13.5px;
color: #94a3b8;
pointer-events: none;
transition: all .22s ease;
}
.radikalwp-in-float input:focus + label,
.radikalwp-in-float input:not(:placeholder-shown) + label {
top: 0;
font-size: 10.5px;
font-weight: 700;
color: #6366f1;
background: #fff;
padding: 1px 6px;
border-radius: 4px;
}
درباره این اسنیپت
لیبلی که هنگام تایپ به بالا شناور میشود و کوچک؛ استاندارد متریال دیزاین برای فرمهای مدرن. این فیلد برای فرمهای ورود، ثبتنام، جستجو و فیلتر طراحی شده و فوکوس و حالتهای خطا را پوشش میدهد. پشتیبانی کامل راستچین (RTL) دارد و در حالت تیره سایت نیز ظاهر مناسبی خواهد داشت. کد کاملاً با CSS خالص نوشته شده و به هیچ کتابخانه خارجی وابسته نیست؛ کافی است آن را کپی و در پروژه خود بچسبانید.
پرسشهای متداول
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
بله، اندازهها با واحدهای نسبی و flex/grid ساخته شدهاند و در نمایشگرهای کوچک هم درست نمایش داده میشوند. اگر عرض ثابت دیدید، میتوانید آن را با max-width برای موبایل تنظیم کنید.
خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشنها روی GPU اجرا میشوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۶ از ۵ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!