How can I change the font-size of one select box option text (select2) with css?

Asked 14/3, 2017 at 14:20 Answered 5/9 at 11:45

I want to change the font-size of one of my select boxes. But it is not working:

 <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>



<select  id="e1" class="select2" style="width:300px">
        <option value="AL">Alabama</option>
        <option value="Am">Amalapuram</option>
        <option value="An">Anakapalli</option>
        <option value="Ak">Akkayapalem</option>
        <option value="WY">Wyoming</option>
    </select>

    <select  id="e2" class="select2" style="width:300px">
        <option value="AL">Alabama</option>
        <option value="Am">Amalapuram</option>
        <option value="An">Anakapalli</option>
        <option value="Ak">Akkayapalem</option>
        <option value="WY">Wyoming</option>
    </select>
<style>
    #e2 .select2-results{
      font-size:4px;
    }
</style>

<script>
$(".select2").select2();
</script>

Humming answered 14/3, 2017 at 14:20 Comment(11)

Try #e2.select2 -- remove the space – Monet 14/3, 2017 at 14:22

@ovokuro Not working: jsfiddle.net/jEADR/3719 – Humming 14/3, 2017 at 14:24

How about use the full select2 script in here https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js – Yolandoyolane 14/3, 2017 at 14:31

I'm not sure if you are really expecting this. Just give a try jsfiddle.net/jEADR/3727 – Gothenburg 14/3, 2017 at 14:31

@Gothenburg No I expect both select boxes to be select2 formatted – Humming 14/3, 2017 at 14:32

oddly enough, if you set Body{font-size: 72px} it works, partly. – Tertial 14/3, 2017 at 14:40

@Tertial But then the font-size changes for all select boxes – Humming 14/3, 2017 at 14:43

@Stavm, sadly it affects all p tags inside the body. – Yolandoyolane 14/3, 2017 at 14:43

do you want to change the font-size in both selects e1 and e2 or just one? – Groome 14/3, 2017 at 14:44

@Groome Just in one (and only the option text). This is my problem – Humming 14/3, 2017 at 14:45

Try #s2id_e2 jsfiddle.net/jEADR/3731 – Lister 14/3, 2017 at 15:7

The solution:

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

<select  id="e1" class="select2" style="width:300px">
        <option value="AL">Alabama</option>
        <option value="Am">Amalapuram</option>
        <option value="An">Anakapalli</option>
        <option value="Ak">Akkayapalem</option>
        <option value="WY">Wyoming</option>
    </select>

    <select  id="e2" class="select2" style="width:300px">
        <option value="AL">Alabama</option>
        <option value="Am">Amalapuram</option>
        <option value="An">Anakapalli</option>
        <option value="Ak">Akkayapalem</option>
        <option value="WY">Wyoming</option>
    </select>

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

.myFont{
  font-size:4px;
}

Humming answered 14/3, 2017 at 15:1 Comment(1)

Interesting. I see that option here at select2.org/configuration/options-api but I get Uncaught Error: No select2/compat/dropdownCss. Maybe this is the problem: github.com/select2/select2/issues/2879#issuecomment-293422517 – Scrawly 24/1, 2019 at 22:53

The best answer I've discovered for this problem is to wrap the select in a div and set the CSS as follows.

CSS:

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

Other code:

<div class="fooSelect"><select  id="e1" class="select2" style="width:300px">
    <option value="AL">Alabama</option>
    <option value="Am">Amalapuram</option>
    <option value="An">Anakapalli</option>
    <option value="Ak">Akkayapalem</option>
    <option value="WY">Wyoming</option>
</select></div>


<script>
    $("#e1").select2();
</script>

Here answered 8/1, 2018 at 2:7 Comment(0)

My change on here

Just add to every option class and use it.

On js file

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

On Css file

.font-size-4{
   font-size:4px;
}

Teahouse answered 12/10, 2017 at 9:22 Comment(0)

By trying your fiddle I came out with this answer also by the help of chrome dev tool. Also select2 needs jQuery in order to run.

See sample below:

$(".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>


<select class="sample">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>

Yolandoyolane answered 14/3, 2017 at 15:3 Comment(0)

ul.select2-results__options li{
  font-size:13px;
}

Lody answered 25/3, 2020 at 5:39 Comment(0)

i use this. maybe can help :

.select2-dropdown {
   font-size: 12px;
}

Hayfork answered 8/10, 2020 at 10:29 Comment(1)

Hi Dhano Please update your question to be specific, with what you want to archive, what you've already searched and a minimal executable sample of what you have. SO can not help if you do not state your problem. Furthermore, try to google and search the SO for your problem first. Welcome to SO Cheers – Weekly 8/10, 2020 at 11:41

.select2-container--default .select2-selection--multiple {
        font-size: 11px;
    }

i tried it and worked

Demitasse answered 17/2, 2023 at 8:34 Comment(1)

Your answer could be improved by adding more information on what the code does and how it helps the OP. – Stagger 18/2, 2023 at 21:2

This is my way to change

$(document).ready(function () {            
            $('.select2,.select2-container,.select2-container--default').css({ "font-size": "12px" });
        });

Touchdown answered 5/9 at 11:45 Comment(0)

-1

Use the CSS selectors below. But I changed the font-size value for this example, since some browsers won't display a font at 4px (there are minimum settings)

#e2.select2, #e2.select2 option {
  font-size:32px;
}

<select  id="e1" class="select2" style="width:300px">
        <option value="AL">Alabama</option>
        <option value="Am">Amalapuram</option>
        <option value="An">Anakapalli</option>
        <option value="Ak">Akkayapalem</option>
        <option value="WY">Wyoming</option>
    </select>

    <select  id="e2" class="select2" style="width:300px">
        <option value="AL">Alabama</option>
        <option value="Am">Amalapuram</option>
        <option value="An">Anakapalli</option>
        <option value="Ak">Akkayapalem</option>
        <option value="WY">Wyoming</option>
    </select>

Ajit answered 14/3, 2017 at 14:27 Comment(7)

I guess it won't work using the select2 script and css. – Yolandoyolane 14/3, 2017 at 14:29

@Ajit But I explicitly asked to have a SELECT2 formatted select box! Why should I remove the formatting?? – Humming 14/3, 2017 at 14:37

not the formatting, the jQuery - you didn't mention the jQuery at all in your question, you only had it in the fiddle – Ajit 14/3, 2017 at 14:38

@Johannes, select2 is a jquery replacement for html select boxes. The script there is important to run the custom selectbox. – Yolandoyolane 14/3, 2017 at 14:39

So actually this is a Javascript question. You should list that Jacascript in your question. I answered your question by what you posted... – Ajit 14/3, 2017 at 14:46

@Ajit But I was hoping that this is working with css – Humming 14/3, 2017 at 14:46

@Ajit I was asking for select2 selectbox – Humming 14/3, 2017 at 14:47

-3

 #e2.select2 {
   font-size: 25px;
}

Embolism answered 14/3, 2017 at 14:35 Comment(1)

Remove the javascript as well – Embolism 14/3, 2017 at 14:36

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags