<script"> <script"> <script" />

Css bilan bitta tanlangan qutining optsiyasi matnini (select2) shrift hajmini qanday o'zgartirish mumkin?

Men tanlagan qutilarimning shrift hajmini o'zgartirmoqchiman. Lekin u ishlamayapti:

http://jsfiddle.net/jEADR/3717/ 

 <link href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js"></script>





    


<script>
$(".select2").select2();
</script>
3
qo'shib qo'ydi tahrirlangan
Ko'rishlar: 11
manba
ro nl ja ru fr es pt de hi bn ar kk be tr uk
To'liq select2 skriptini bu yerda qanday ishlatish mumkin? https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/sele‌ ct2.full.min.js
qo'shib qo'ydi muallif claudios, manba
@Stavm, afsuski, tanadagi barcha p belgilariga ta'sir qiladi.
qo'shib qo'ydi muallif claudios, manba
# s2id_e2 harakat qilib ko'ring jsfiddle.net/jEADR/3731
qo'shib qo'ydi muallif uom-pgregorio, manba
@Chiller Faqat bitta (va faqat matnli matn). Bu mening muammom
qo'shib qo'ydi muallif Jarla, manba
@Stavm Lekin shrift o'lchami hamma tanlangan qutilar uchun o'zgaradi
qo'shib qo'ydi muallif Jarla, manba
@Venky Yo'q, har ikkala tanlov qutilarini2 formatlashini kutmoqdaman
qo'shib qo'ydi muallif Jarla, manba
@ovokuro ishlamayapti: jsfiddle.net/jEADR/3719
qo'shib qo'ydi muallif Jarla, manba
Men, albatta, buni kutmoqdasiz. Faqat jsfiddle.net/jEADR/3727 dan foydalaning.
qo'shib qo'ydi muallif Venky, manba
agar siz Body {harflarning o'lchami: 72px} ni tanlasangiz, u qisman ishlaydi.
qo'shib qo'ydi muallif Stavm, manba
har ikkalasida ham harflarning o'lchamini o'zgartirishni xohlaysizmi, e1 va e2 ni tanlang yoki bittami?
qo'shib qo'ydi muallif Chiller, manba
# e2.select2 - bo'sh joyni olib tashlang
qo'shib qo'ydi muallif sol, manba

7 javoblar

Qaror:

http://jsfiddle.net/jEADR/3730/ 



    

<script>
$(".select2").select2();
$("#e2").select2({ dropdownCssClass: "myFont" });
</script>

.myFont{
  font-size:4px;
}
4
qo'shib qo'ydi
manba

Ssenariyni sinab, men ham bu javob bilan krom gigant yordamida yordamga keldim. Bundan tashqari, select2 uchun jQuery kerak. ishga tushirish.

Quyidagi namunaga qarang:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> 

$(".sample").select2({
	width: '200px',
  theme: "classic"
});
/* Select option */
.select2-results__option { 
  font-size: 30px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</div> </div>

1
qo'shib qo'ydi
manba

Ushbu muammoni echish uchun topilgan eng yaxshi javob, div ichida tanlovni o'ynash va CSS-ni quyidagi tarzda belgilashdir.

CSS:

.fooSelect
{
    display:inline;
}
.fooSelect .select2-selection__rendered
{
    font-size:1.2em;
}

Boshqa kod:

<div class="fooSelect"></div>


<script>
    $("#e1").select2();
</script>
1
qo'shib qo'ydi
manba

Bu yerdagi o'zgartirishlarim

Faqat har bir variant sinfiga qo'shing va undan foydalaning.

JS faylida

$("#e1 option,#e2 option").addClass("font-size-4");
$(".select2").select2();

Css faylida

.font-size-4{
   font-size:4px;
}
1
qo'shib qo'ydi
manba 
 #e2.select2 {
   font-size: 25px;
}​
1
qo'shib qo'ydi
manba
JavaScript-ni o'chirib tashlang
qo'shib qo'ydi muallif Loveneet Saini, manba

Quyidagi CSS tanlovchilaridan foydalaning. Lekin men ushbu misol uchun shrift o'lchamini o'zgartirdim, chunki ba'zi brauzerlar 4px (hech bo'lmaganda sozlamalar mavjud)

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> 

#e2.select2, #e2.select2 option {
  font-size:32px;
}
</div> </div>

0
qo'shib qo'ydi
manba
@Johannes, select2 - HTML tanlash qutilari uchun jQuery almashtirish. Buyruq fayliga maxsus tanlov qutisini ishlatish muhim.
qo'shib qo'ydi muallif claudios, manba
Menimcha select2 skript va CSS yordamida ishlamaydi.
qo'shib qo'ydi muallif claudios, manba
Men fiddle bilan ishlayotganingizni o'yladim
qo'shib qo'ydi muallif Jarla, manba
Menga kerak bo'lgan narsa: imgur.com/a/RZviY
qo'shib qo'ydi muallif Jarla, manba
Bunga quyidagilar kiradi: imgur.com/a/o3nAX
qo'shib qo'ydi muallif Jarla, manba
@Johannes Men aniq qilib, SELECT2 formatlangan tanlov qutisini tanlashini so'radim! Nima uchun formatlashni olib tashlashim kerak?
qo'shib qo'ydi muallif Jarla, manba
@Johannes Lekin men bu CSS bilan ishlayotganiga umid qilgandim
qo'shib qo'ydi muallif Jarla, manba
Bu select2 bilan ishlamaydi: jsfiddle.net/jEADR/3725
qo'shib qo'ydi muallif Jarla, manba
@Johannes Men tanlagan 2 tanlash qutisini so'radim
qo'shib qo'ydi muallif Jarla, manba
Shunday qilib, aslida, bu Javascript savol. Sizning savolingizga ushbu "Jacascript" ni kiritishingiz kerak. Men sizning savolingizga javobingizni bergansiz.
qo'shib qo'ydi muallif Johannes, manba
Agar siz ushbu jQuery liniyasini olib tashlasangiz, u shunday qiladi: jsfiddle.net/34mf5707
qo'shib qo'ydi muallif Johannes, manba
formatlash emas, balki jQuery - sizning savolingizda jQuery haqida gapirmagansiz, faqat fiddle
qo'shib qo'ydi muallif Johannes, manba

Sizning dastlabki kartangizda ba'zi xatolar bor. Pastga qarang:

enter image description here

O'zgartirishni tavsiya eting:

enter image description here

Notice that I changed the following: enter image description here

0
qo'shib qo'ydi
manba
Buni chiqarganimda, select2 bilan formatlashtirilmaydi
qo'shib qo'ydi muallif Jarla, manba
Menga kerak bo'lgan narsa: jsfiddle.net/jEADR/3729 Lekin faqat bitta tanlov qutisiga
qo'shib qo'ydi muallif Jarla, manba