پیشنمایش زنده
اسنیپت
ورودی جستجو با ذرهبین
ورودی
جستجو
ذرهبین
۴۷
۴.۸ (۷)
<input class="radikalwp-ui-inppill" type="text" placeholder="کد تخفیف را وارد کنید">
.radikalwp-ui-inppill {
width: 280px;
padding: 12px 24px;
font-family: inherit;
font-size: 14px;
color: #0f172a;
background: #f1f5f9;
border: 2px solid transparent;
border-radius: 999px;
outline: none;
transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.radikalwp-ui-inppill::placeholder { color: #94a3b8; }
.radikalwp-ui-inppill:focus {
background: #fff;
border-color: #a5b4fc;
box-shadow: 0 6px 18px rgba(99, 102, 241, .15);
}
ورودی کپسولی با پسزمینه خاکستری بسیار روشن و حاشیه نامرئی که با فوکوس سفید میشود، حاشیه بنفش کمرنگ میگیرد و سایه لطیف زیرش مینشیند. حس نرم و دوستانه آن برای فرمهای عضویت، کد تخفیف و ورودیهای فرعی فروشگاه ساخته شده است. گوشههای کاملاً گرد آن در موبایل هم لمس دلپذیری دارد. تغییر رنگ آن ساده و سریع است.
مقدار border-radius را از 999px به عددی مثل 12px کاهش دهید تا از کپسول کامل به مستطیل نرم برسد.
رنگ border-color و رنگ سایه در حالت focus را با پالت دلخواه جایگزین کنید. رنگ پسزمینه حالت عادی هم قابل تغییر است.
بله؛ کافی است ورودی و دکمه را داخل یک flex با gap قرار دهید. ارتفاع یکسان هر دو باعث میشود ردیف تمیزی ساخته شود.
میانگین امتیاز کاربران: ۴.۸ از ۶ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!