<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 را تغییر دهید؛ پیشنهاد میشود همان رنگ حاشیه فوکوس باشد تا هماهنگ بماند.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۷ از ۷ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!