پیش‌نمایش زنده (iframe sandbox) تمام‌صفحه
در حال بارگذاری پیش‌نمایش زنده...
<div class="radikalwp-form-float"><input class="radikalwp-form-float-input" type="email" id="radikalwp-float-email" placeholder=" " required><label class="radikalwp-form-float-label" for="radikalwp-float-email">ایمیل شما<//label><//div>
.radikalwp-form-float {
  position: relative;
  max-width: 320px;
}
.radikalwp-form-float-input {
  width: 100%;
  padding: 22px 16px 8px;
  font-family: inherit;
  font-size: 14px;
  color: #1e293b;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  outline: none;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.radikalwp-form-float-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .14);
}
.radikalwp-form-float-label {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #94a3b8;
  pointer-events: none;
  transition: all .2s ease;
}
.radikalwp-form-float-input:focus + .radikalwp-form-float-label,
.radikalwp-form-float-input:not(:placeholder-shown) + .radikalwp-form-float-label {
  top: 12px;
  transform: none;
  font-size: 11px;
  color: #6366f1;
  font-weight: 700;
}

درباره این اسنیپت

ورودی مدرن با لیبلی که در حالت عادی داخل فیلد نشسته و با شروع تایپ یا فوکوس، به بالا شناور می‌شود و کوچک می‌گردد. این الگو جای placeholder را می‌گیرد و لیبل هرگز گم نمی‌شود؛ تجربه‌ای تمیز و اپ‌گونه می‌سازد. برای فرم‌های ورود، ثبت‌نام و پرداخت اطلاعات مناسب است. افکت فقط با :placeholder-shown و transform کار می‌کند.

پرسش‌های متداول

placeholder از یک فاصله خالی پر شده تا :placeholder-shown بتواند تشخیص دهد فیلد خالی است؛ وقتی تایپ شروع شود، لیبل با transform به بالا می‌رود. حتماً placeholder=" " را نگه دارید.

خیر؛ این الگو مخصوص input و textarea است. برای سلکت، لیبل را خارج فیلد یا از الگوی حاشیه رنگی استفاده کنید.

مقدار color در قاعده :focus + label را تغییر دهید؛ پیشنهاد می‌شود همان رنگ حاشیه فوکوس باشد تا هماهنگ بماند.

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

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

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

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

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

کپچا

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

شاید بپسندی

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

ورودی برچسب شناور

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

اینپوت لیبل شناور

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

اینپوت لیبل شناور استاندارد

فرم اینپوت لیبل شناور
۴۵
۴.۷ (۷)