<form class="radikalwp-form-search" action="#"><input class="radikalwp-form-search-input" type="search" placeholder="جستجوی اسنیپت، قالب یا مقاله..." aria-label="جستجو"><button class="radikalwp-form-search-btn" type="submit">🔍<//button><//form>
.radikalwp-form-search {
display: flex;
align-items: center;
max-width: 420px;
padding: 4px 4px 4px 0;
background: #fff;
border: 1.5px solid #e2e8f0;
border-radius: 14px;
transition: border-color .25s ease, box-shadow .25s ease;
}
.radikalwp-form-search:focus-within {
border-color: #6366f1;
box-shadow: 0 0 0 4px rgba(99, 102, 241, .15);
}
.radikalwp-form-search-input {
flex: 1;
padding: 11px 16px;
font-family: inherit;
font-size: 14px;
color: #1e293b;
background: transparent;
border: none;
outline: none;
}
.radikalwp-form-search-input::placeholder { color: #94a3b8; }
.radikalwp-form-search-btn {
padding: 9px 16px;
font-size: 15px;
background: #eef2ff;
border: none;
border-radius: 11px;
cursor: pointer;
transition: background .25s ease;
}
.radikalwp-form-search-btn:hover { background: #e0e7ff; }
درباره این اسنیپت
فیلد جستجوی بزرگ با آیکون ذرهبین سمت راست و حالت فوکوس نرم که هاله آبی دور ورودی میکشد. دکمه جستجو داخل خود فیلد ادغام شده تا فضا کمتر اشغال شود و در موبایل هم جمعوجور بماند. برای هدر سایت، صفحه جستجو و سایدبار کاربرد دارد. placeholder فارسی و جهت راستبهچپ از پیش تنظیم شده است.
پرسشهای متداول
بله؛ داخل دکمه یک SVG ذرهبین با اندازه 18 پیکسل بگذارید و padding دکمه را کمی تنظیم کنید. ظاهر حرفهایتر و هماهنگ با برند میشود.
با سلکتور :focus-within وقتی کاربر روی ورودی کلیک یا تایپ میکند، حاشیه و هاله دور کل جعبه ظاهر میشود؛ نیازی به جاوااسکریپت نیست.
بله؛ یک ul مطلق زیر فرم بگذارید و با JS نتایج را پر کنید. جعبه بهدلیل position استاتیک، بهتر است داخل wrapper با position:relative قرار بگیرد.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۶ از ۳ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!