نحوه تغییر استایل کامپوننت select2 چگونه است ؟

11:05:00 AM - 1404/05/11

سلام

من از طریق روشی که در سوال ایجاد کمبوباکس (Drop Down List) با قابلیت جستجو در Asp.net Core بود یک کمبو باکس ایجاد کردم و مشکلی در استفاده از آن ندارم.

کد ویو

<label class="control-label col-xs-12 LabelClass" style="color:#fb4488;font-weight:bold"> لطفا گروه را انتخاب کنید</label>

<select class="js-example-basic-single " id="Obj_Group" asp-for="@UL.Obj_Group" name="Obj_Group" style="font-size:25px; height:40px"
asp-items="@(new SelectList(ListGroup, "Id","Name"))">
 </select>

کد اسکریپت

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
    $(document).ready(function () {
        $('.js-example-basic-single').select2();
    });
</script>
}

همانند شکل زیر ایجاد شد و همه چی اوکی هست.

فقط مشکلم این هست ک با دادن استایل جدید استایل آن هیچ تغییری نمی کند.

من فونت رو 24 قراردادم اما پیش فرض در کلاس 'js-example-basic-single' فونت 14 هست

اما من قصد دارم اون رو تغییر بدم اما با استایل دهی و یا یک کلاس جدید هیچ تغییری اعمال نمیشه لطفا راهنمایی بفرمایید چطور این کار رو انجام بدم.

ویرایش شده در شنبه ۱۱ مرداد ۱۴۰۴ ساعت ۱۵:۰۵:۰۹

به این سوال امتیاز بدهید 0 تعداد بازدید این سوال : 110

پاسخ دهنده : hamid_b 03:13:00 PM - 1404/05/11

برای این کار کافیه یه id به کامپوننت خودتون بدید و بعد براش استایل تعریف کنید. فرض می کنیم Id شما mySelect باشه :

//این کد موقع initial کردن کامپوننت در جی کویری هست.
$('#mySelect').select2({
  dropdownCssClass: "my-custom-dropdown",
  containerCssClass: "my-custom-container"
});


//کدهای css
.my-custom-container {
  border: 2px solid red;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.my-custom-dropdown {
  font-size: 14px;
  background-color: #fff;
  color: #333;
}

تو کدهای بالا اول دو تا کلاس موقع initial کردن کامپوننت select2 بهش دادیم و بعد به همین دو تا کلاس استایل دادیم.

نکته : یه سری کلاس ها هم خود کامپوننت به صورت پیش فرض داره که میتونید این کلاس ها هم تغییر استایل بدید. کافیه روی مرورگر دکمه f12 رو بزنید و از سربرگ Elements استایل ها و کدهای کامپوننت رو ببینید و هر کلاسی رو خواستید تغییر بدید. مثلا

.select2-container--default .select2-selection--single {
  border: 2px solid #007bff !important;
  height: 40px !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
}

.select2-container--default .select2-results__option--highlighted {
  background-color: #007bff !important;
  color: white !important;
}

الان کلاس هایی که در کد بالا هست به طور پیش فرض در خود کامپوننت استایل دهی شده بودن که ما تغییرش دادیم.