شخصی سازی تگ سلکت فقط با CSS؛ فرار از ظاهر قدیمی

در این آموزش سعی داریم تا فقط با استفاده از CSS سراغ یکی مشکلات برنامه نویس های وب، یعنی شخصی سازی تگ سلکت برویم.

بدیهی است منوهای آبشاری select یکی از کاربردی ترین عناصر مورد استفاده در وب به ویژه در فرم ها هستند. پیش تر در مطلب «لیست کشویی را با این ۸ نکته در رابط کاربری خود بهینه کنید» به بررسی کاربرد این عنصر پرداختیم. در این آموزش سعی داریم تا با استفاده از سی اس اس ظاهر این تگ را تغییر دهیم. تگ select به عنوان یکی از سخت ترین المان های وب برای شخصی سازی شناخته می شود. علاوه بر ظاهر قدیمی، این عنصر در مرورگر های مختلف رفتار متفاوتی نیز دارد. اگر شما هم قصد دارید تا بدون استفاده از جاوا اسکریپت و سنگین کردن پروژه خود ظاهر این تگ را تغییر دهید این آموزش را از دست ندهید.

شخصی سازی تگ سلکت

روش های مختلفی برای ایجاد تغییر در تگ select وجود دارد. در این آموزش سعی شده تا به ساده ترین روش منویی زیبا و کاربردی طراحی کنیم. در ابتدا لازم است تا با ایجاد یک والد، تگ خود را بسازیم.

<div class="tooc_select">
  <select>
    <option>انتخاب رنگ</option>
    <option>مشکی</option>
    <option>سفید</option>
    <option>بنفش</option>
    <option>آبی</option>
    <option>سبز</option>
  </select>
  <div class="tooc_arrow"></div>
</div>

با این کار علاوه بر کنترل بهتر بر روی این عنصر، می توانیم کلاسی جدا برای رسم فلش رو به پایین ایجاد کنیم.

پس از آماده کردن کد های بخش HTML نوبت به حذف استایل های پیشفرض مرورگرها برای select می رسد. برای این کار با حذف کردن border و outline شروع می کنیم تا خطوط حاشیه ای حذف شوند. سپس با خالی کردن appearance استایل های دیگر مرورگر ها مانند فلش پیش فرض کنار باکس را حذف می کنیم:

select {
  border: none;
  outline: none;
  appearance: none;
}

حال نوبت به تغییر رنگ زمینه و متن می رسم. سپس با استفاده از ایجاد padding سعی می کنیم تا ابعاد مناسب تری برای این باکس بسازیم. تا اینجا کد های تگ سلکت باید به این شکل باشد:

select {
  border: none;
  outline: none;
  appearance: none;
  background-color: teal;
  color: #fff;
  padding: 0.5em 1.5em 0.5em 3.5em;
}

برای ایجاد باکس مربوط به محل قرار گیری فلش از کلاس tooc_arrow استفاده می کنیم. این باکس را با ابعاد ثابت و رنگ زمینه مشکی با غلظت کم ایجاد کردیم تا ظاهر نهایی را جذاب تر کند:

.tooc_arrow {
  width: 2em;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 0;
  left: 0;
}

ایجاد مثلث در CSS

برای ایجاد مثلث از روش های زیادی می شود استفاده کرد. بهینه ترین، ساده ترین و جذاب ترین روش استفاده از CSS است. با استفاده از این روش می توانید به سادگی یک مثلث در جهت های مختلف ایجاد کنید. برای این کار به دو border شفاف و یک border رنگی نیاز داریم. برای مثال در کد زیر یک مثل رو به پایین خواهیم داشت:

border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;

حال با توجه به روش بالا کد های خود را برای داشتن یک مثلث به شکل زیر تغییر می دهیم. در اینجا برای جلوگیری از ایجاد عنصر اضافه، از خاصیت after استفاده شده است. سپس با استفاده از دستورات سی اس اس این فلش را به وسط باکس قبلی منتقل کرده ایم:

.tooc_arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
}

غیر فعال کردن کلیک

یکی از مشکلات این کد، عدم توانایی کلیک بر روی کادر آیکون برای باز کردن منو است. این اتفاق به دلیل ایجاد یک لایه بر روی تگ select اتفاق می افتد. با استفاده از pointer-events می توانیم کلیک یک عنصر را غیر فعال و به لایه پایینی انتقال دهیم. برای این کار کد زیر را به کلاس tooc_arrow اضافه می کنیم:

pointer-events: none;

با این روش شما می توانید شخصی سازی تگ سلکت را فقط با استفاده از CSS پیاده سازی کنید. برای اطلاع بیشتر درباره هر خط کد و مشاهده کد های بیشتر پیشنهاد می کنم ویدیوی این مطلب را از دست ندهید.