<div class="radikalwp-fm-suffix"><input type="text" value="۲۵۰٬۰۰۰" /><span>تومان<//span><//div>
.radikalwp-fm-suffix {
display: flex;
align-items: stretch;
width: 240px;
background: #fff;
border: 1.5px solid #e2e8f0;
border-radius: 12px;
overflow: hidden;
transition: border-color .25s ease;
}
.radikalwp-fm-suffix input {
flex: 1;
min-width: 0;
padding: 12px 14px;
border: none;
outline: none;
font-family: inherit;
font-size: 14px;
font-weight: 700;
color: #0f172a;
}
.radikalwp-fm-suffix span {
display: flex;
align-items: center;
padding: 0 14px;
font-size: 12px;
font-weight: 700;
color: #64748b;
background: #f1f5f9;
border-right: 1.5px solid #e2e8f0;
}
.radikalwp-fm-suffix:focus-within { border-color: #4f46e5; }
درباره این اسنیپت
فیلد عددی با پسوند «تومان» چسبیده به لبه؛ مرز فیلد و واحد را واضح جدا میکند. برای فرمهای مالی، کیف پول و محاسبهگرها مناسب است. این فیلد برای فرمهای ورود، ثبتنام، جستجو و فیلتر طراحی شده و فوکوس و حالتهای خطا را پوشش میدهد. این المان در ویجت HTML المنتور، فایل قالب استاتیک یا هر پروژه PHP و HTML دیگری بدون تغییر کار میکند. برای تغییر حس بصری کافی است متغیرهای رنگ بالای کد را عوض کنید؛ بقیه چیدمان دستنخورده میماند.
پرسشهای متداول
بله، اندازهها با واحدهای نسبی و flex/grid ساخته شدهاند و در نمایشگرهای کوچک هم درست نمایش داده میشوند. اگر عرض ثابت دیدید، میتوانید آن را با max-width برای موبایل تنظیم کنید.
خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشنها روی GPU اجرا میشوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۲ از ۸ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!