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

سلام

من از طریق روشی که در سوال ایجاد کمبوباکس (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 هست

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

ویرایش شده در شنبه 11 مرداد 1404 ساعت 15:05:09

مشخصات سوال کننده :

کاربر : Rouhbakhsh امتیاز کاربر : 1 رتبه کاربر : 152

دسته بندی : Asp.net Core Html Css

نظر ویرایش گزارش نشان

به این سوال امتیاز بدهید 1

تعداد بازدید این سوال : 464

هوش مصنوعی

پاسخ هوش مصنوعی

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

در اینجا یک نمونه از CSS برای تغییر فونت و اندازه کمبوباکس Select2 شما آورده شده است:


.select2-container .select2-selection--single {
    height: 40px; /* تنظیم ارتفاع */
    font-size: 24px; /* تنظیم اندازه فونت */
}
.select2-selection__rendered {
    line-height: 40px; /* وسط چسباندن متن */
}
.select2-selection__arrow {
    height: 40px; /* تنظیم ارتفاع فلش */
}

مطمین شوید که این سبک ها را بعد از بارگذاری Select2 در صفحه قرار داده اید. همچنین می توانید برای اعمال تغییرات خود، کلاس های مناسب را به HTML اضافه کرده و انتخاب گرهای CSS را به درستی تنظیم کنید.

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

به این پاسخ امتیاز بدهید 0

امتیاز: - رتبه: -

نظر ویرایش گزارش

پاسخ دهنده : hamid_b 15:13 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;
}

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

به این پاسخ امتیاز بدهید 2

امتیاز: 518 رتبه: 4

نظر ویرایش گزارش

1 نظر

Rouhbakhsh : سپاس از پاسخ جنابعالی

امتیاز کاربر : 1 رتبه کاربر : 152 تاریخ ثبت : 08:33 1404/05/12

حذف

آخرین سوالات ثبت ‌شده

سوالات مرتبط

آموزش های پرطرفدار

برای ارسال پاسخ لطفا وارد حساب کاربری خود شوید. ورود

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

پاسخ هوش مصنوعی

آموزش ساخت اتوماسیون اداری تحت وب

آموزش ساخت سیستم فروش و انبارداری وب

آموزش ساخت سیستم حقوق و دستمزد وب با سینکفیوژن

آموزش ساخت سیستم آزمونگیر آنلاین