پیش‌نمایش زنده (iframe sandbox) تمام‌صفحه
در حال بارگذاری پیش‌نمایش زنده...
<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 قرار دهید. ارتفاع یکسان هر دو باعث می‌شود ردیف تمیزی ساخته شود.

امتیاز شما به این محتوا

میانگین امتیاز کاربران: ۴.۸ از ۶ رأی — برای امتیازدهی وارد شوید

دیدگاه‌ها (۰)

هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!

دیدگاه خود را بنویسید

کپچا

دیدگاه شما پس از تأیید مدیر نمایش داده می‌شود.

شاید بپسندی

پیش‌نمایش زنده اسنیپت

ورودی جستجو با ذره‌بین

ورودی جستجو ذره‌بین
۴۷
۴.۸ (۷)
پیش‌نمایش زنده اسنیپت

ورودی با لیبل شناور

فرم ورودی لیبل شناور
۴۵
۴.۷ (۷)
پیش‌نمایش زنده اسنیپت

جعبه جستجو با آیکون شیشه‌ای

فرم جستجو ورودی
۱۸
۴.۶ (۳)