نحوه تغییر استایل کامپوننت 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 هست
اما من قصد دارم اون رو تغییر بدم اما با استایل دهی و یا یک کلاس جدید هیچ تغییری اعمال نمیشه لطفا راهنمایی بفرمایید چطور این کار رو انجام بدم.
برای این کار کافیه یه 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;
}
الان کلاس هایی که در کد بالا هست به طور پیش فرض در خود کامپوننت استایل دهی شده بودن که ما تغییرش دادیم.