پیش‌نمایش زنده (iframe sandbox) تمام‌صفحه
در حال بارگذاری پیش‌نمایش زنده...
<div class="radikalwp-form-select"><select class="radikalwp-form-select-el" aria-label="انتخاب استان"><option value="" selected disabled>انتخاب استان...<//option><option>تهران<//option><option>اصفهان<//option><option>فارس<//option><option>خراسان رضوی<//option><//select><span class="radikalwp-form-select-arrow" aria-hidden="true">▾<//span><//div>
.radikalwp-form-select {
  position: relative;
  max-width: 280px;
}
.radikalwp-form-select-el {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 14px;
  color: #1e293b;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  outline: none;
  cursor: pointer;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.radikalwp-form-select-el:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, .14);
}
.radikalwp-form-select-arrow {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 14px;
  pointer-events: none;
  transition: transform .25s ease, color .25s ease;
}
.radikalwp-form-select-el:focus ~ .radikalwp-form-select-arrow {
  transform: translateY(-50%) rotate(180deg);
  color: #6366f1;
}

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

منوی کشویی با ظاهری سفارشی که فلش پیش‌فرض مرورگر را حذف و یک فلش SVG ظریف جایگزین می‌کند. در فوکوس، فلش ۱۸۰ درجه برمی‌گردد و حاشیه رنگی می‌شود تا باز بودن منو حس شود. برای فرم‌های ثبت‌نام، فیلترها و انتخاب استان/شهر مناسب است. ظاهر در کروم و فایرفاکس و سافاری یکسان رندر می‌شود.

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

با appearance: none ظاهر بومی سلکت خاموش می‌شود و span فلش، موقعیت مطلق سمت چپ می‌گیرد. برای RTL فلش سمت چپ و padding متن راست است.

چرخش به :focus وابسته است؛ اگر منو با انتخاب گزینه بسته شود فوکوس می‌ماند و فلش باز می‌ماند که رفتار قابل قبولی است. اگر نمی‌خواهید، چرخش را روی :focus-within والد نگذارید و فقط :active را بگیرید.

استایل option ها محدودیت مرورگری دارد؛ در دسکتاپ می‌توانید background-color به option بدهید اما برای کنترل کامل باید سلکت سفارشی با لیست div بسازید.

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

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

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

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

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

کپچا

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

شاید بپسندی

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

سلکت سفارشی فلش‌دار

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

اینپوت خط زیر متحرک

فرم اینپوت خط
۱۰۰
۴.۲ (۱۶)
پیش‌نمایش زنده اسنیپت

فرم ورود شیشه‌ای شبانه

فرم ورود شیشه‌ای
۱۰۰
۴.۲ (۱۶)