CODEWITHSUNDEEP
jquerycssjquery-select2
peace_love
peace_love

Reputation: 6461

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

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

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>



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

Upvotes: 8

Views: 30450

Answers (10)

Orion77
Orion77

Reputation: 138

This is my way to change

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

Upvotes: 0

Amalia Safira
Amalia Safira

Reputation: 1

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

i tried it and worked

Upvotes: 0

DHANO KAMEL
DHANO KAMEL

Reputation: 11

i use this. maybe can help :

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

Upvotes: 1

grit
grit

Reputation: 93

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

Upvotes: 1

space_food_
space_food_

Reputation: 830

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>

Upvotes: 6

Norayr Baghdasarov
Norayr Baghdasarov

Reputation: 425

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

Upvotes: 2

claudios
claudios

Reputation: 6656

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>

Upvotes: 1

peace_love
peace_love

Reputation: 6461

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

Upvotes: 12

Loveneet Saini
Loveneet Saini

Reputation: 116

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

Upvotes: -3

Johannes
Johannes

Reputation: 67738

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>

Upvotes: -1

Related Questions