Is there a way to adjust the font size of a select option?

Question

Is there a way to adjust the font size of a select option?

Looking to customize the appearance of a select option dropdown list. Wondering if it's possible to change the font sizes of individual options rather than keeping them all the same? For instance, having the default:

-- Select Country --

displayed at 7pt and then having a specific option like

Georgia

shown at 13pt.

This is the current setup of my dropdown list:

.select_join {
  width: 170px;
  height: 28px;
  overflow: hidden;
  background: url('http://s24.postimg.org/lyhytocf5/dropdown.png') no-repeat right #FEFEFE;
  border: #FEFEFE 1px solid;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: inset 0px 0px 10px 1px #FEFEFE;
  box-shadow: inset 0px 0px 10px 1px #FEFEFE;
}
.select_join select {
  background: transparent;
  width: 170px;
  font-size:7pt;
  color:grey;
  border: 0;
  border-radius: 0;
  height: 28px;
  -webkit-appearance: none;
}
.select_join select:focus {
  outline: none;
}

<div style="background-color:pink;height:150px; text-align:center;">
  <br/>
  <div class="select_join" style="margin-left:15px">
    <select name="txtCountry">
      <option>-- Select Country --</option>
      <option value="1">Georgia</option>
      <option value="2">Afghanistan</option>
    </select>
  </div>
</div>

You can view a demonstration on JSFiddle for reference.

However, there seems to be an issue with compatibility as this styling only works on Firefox. Perhaps other browsers do not support styling of <option> elements?

These are the browsers that I have tested on:

Chrome: Version 27.0.1453.116 m
IE: 10
Firefox: 22.0

css html-select font-size

Answer 1

Answer №1

Let's Discover a Clever Solution...

Traditional select-dropdown elements don't easily accept styles. However, by including a "size" parameter in the tag, you can effectively apply CSS styling. To demonstrate this concept, I have developed a workaround that mimics a standard select tag while also allowing manual value editing like a ComboBox found in visual languages (unless marked as readonly in the input tag).

An Example Simplified:

<style>

    /* only these 2 lines are truly required */
    .stylish span {position:relative;}
    .stylish select {position:absolute;left:0px;display:none}

    /* now you can style the hell out of them */
    .stylish input    { ... }
    .stylish select   { ... }
    .stylish option   { ... }
    .stylish optgroup { ... }

</style>
...
<div class="stylish">
    <label> Choose your superhero: </label>
    <span>
        <input onclick="$(this).closest('div').find('select').slideToggle(110)">
        <br>
        <select size=15 onclick="$(this).hide().closest('div').find('input').val($(this).find('option:selected').text());">

            <optgroup label="Fantasy"></optgroup>
            <option value="gandalf">Gandalf</option>
            <option value="harry">Harry Potter</option>
            <option value="jon">Jon Snow</option>

            <optgroup label="Comics"></optgroup>
            <option value="tony">Tony Stark</option>
            <option value="steve">Steven Rogers</option>
            <option value="natasha">Natasha Romanova</option>

        </select>
    </span>
    <!--

        For the sake of simplicity, I used jQuery here.
        Today it's easy to do the same without it, now
        that we have querySelector(), closest(), etc.

    -->
</div>

A Showcase of This Method:

https://jsfiddle.net/7ac9us70/1052/

Note 1: Apologies for the extravagant gradients and embellishments - they are optional, mere displays of flair. Yes, I'm aware, human tendencies at play.

Note 2: The deliberate omission of enclosing <optgroup> tags around their respective options is intentional for enhanced stylability. This approach allows seamless functionality across all browsers with minimal hassle.

Answer 2

Let's Discover a Clever Solution...

Traditional select-dropdown elements don't easily accept styles. However, by including a "size" parameter in the tag, you can effectively apply CSS styling. To demonstrate this concept, I have developed a workaround that mimics a standard select tag while also allowing manual value editing like a ComboBox found in visual languages (unless marked as readonly in the input tag).

An Example Simplified:

<style>

    /* only these 2 lines are truly required */
    .stylish span {position:relative;}
    .stylish select {position:absolute;left:0px;display:none}

    /* now you can style the hell out of them */
    .stylish input    { ... }
    .stylish select   { ... }
    .stylish option   { ... }
    .stylish optgroup { ... }

</style>
...
<div class="stylish">
    <label> Choose your superhero: </label>
    <span>
        <input onclick="$(this).closest('div').find('select').slideToggle(110)">
        <br>
        <select size=15 onclick="$(this).hide().closest('div').find('input').val($(this).find('option:selected').text());">

            <optgroup label="Fantasy"></optgroup>
            <option value="gandalf">Gandalf</option>
            <option value="harry">Harry Potter</option>
            <option value="jon">Jon Snow</option>

            <optgroup label="Comics"></optgroup>
            <option value="tony">Tony Stark</option>
            <option value="steve">Steven Rogers</option>
            <option value="natasha">Natasha Romanova</option>

        </select>
    </span>
    <!--

        For the sake of simplicity, I used jQuery here.
        Today it's easy to do the same without it, now
        that we have querySelector(), closest(), etc.

    -->
</div>

A Showcase of This Method:

https://jsfiddle.net/7ac9us70/1052/

Note 1: Apologies for the extravagant gradients and embellishments - they are optional, mere displays of flair. Yes, I'm aware, human tendencies at play.

Note 2: The deliberate omission of enclosing <optgroup> tags around their respective options is intentional for enhanced stylability. This approach allows seamless functionality across all browsers with minimal hassle.

Answer 3

Answer №2

To customize the look of the <option> tag, you can apply a CSS class to it. Check out this example on how to do it: http://jsfiddle.net/Ahreu/

Keep in mind that WebKit browsers currently do not support this feature as it is not defined in the spec. For more information, refer to: How to style a select tag's option element?

Answer 4

To customize the look of the <option> tag, you can apply a CSS class to it. Check out this example on how to do it: http://jsfiddle.net/Ahreu/

Keep in mind that WebKit browsers currently do not support this feature as it is not defined in the spec. For more information, refer to: How to style a select tag's option element?

Answer 5

Answer №3

Set the font size of the option element to 13pt

select option{
    font-size: 13pt;
}

Additionally, style the first option element with a font size of 7pt

select option:first-child {
    font-size: 7pt;
}

Check out the live demo here: http://jsfiddle.net/VggvD/1/

Answer 6

Set the font size of the option element to 13pt

select option{
    font-size: 13pt;
}

Additionally, style the first option element with a font size of 7pt

select option:first-child {
    font-size: 7pt;
}

Check out the live demo here: http://jsfiddle.net/VggvD/1/

Answer 7

Answer №4

Give this a shot

http://codepen.io/username123/pen/XyzA5/

Insert your CSS code here

.button_style{
    background-color: #F5A623;
}

Answer 8

Give this a shot

http://codepen.io/username123/pen/XyzA5/

Insert your CSS code here

.button_style{
    background-color: #F5A623;
}

Answer 9

Answer №5

take a look at this link,

I recently modified the fiddle above and it seems to be functioning well

http://jsfiddle.net/narensrinivasans/FpNxn/2/

.selectDefault, .selectDiv option
{
    font-family:verdana;
    font-size:14px;
}

Answer 10

take a look at this link,

I recently modified the fiddle above and it seems to be functioning well

http://jsfiddle.net/narensrinivasans/FpNxn/2/

.selectDefault, .selectDiv option
{
    font-family:verdana;
    font-size:14px;
}

Answer 11

Answer №6

select[value="selected"]{
   background-color: blue;
   padding: 4px;
   font-weight:bold;
}

Answer 12

select[value="selected"]{
   background-color: blue;
   padding: 4px;
   font-weight:bold;
}

Is there a way to adjust the font size of a select option?

Answer №1

Let's Discover a Clever Solution...

An Example Simplified:

A Showcase of This Method:

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Shift a Div to the left prior to stretching it out

Is there a variance in window.innerWidth between Chrome and Firefox?

Setting the borderRadius for a web view on Android Maps V3: A complete guide

"Enjoying a table header that scrolls freely with autoscroll feature

Creating a drop-down menu that aligns perfectly under the bar in Material-UI: What you need to know

Numerous animated elements within A-frame

Showing two divs on top of an image inside a container

Is there a way to ensure my function runs as soon as the page starts loading?

Center align text in the uib-progressbar

Dynamic Email Design

Arrange a div element among the descendants of a neighboring div

What is the best method for aligning buttons in a row with all the other buttons?

Tips on adjusting the size of a font icon using an inline element prior to the font being fully loaded

Adjust the class attribute in real-time

Tips for identifying the clicked location inside an element using JavaScript?

Issue with readonly is preventing the ability to alter the font color of the input

Vuetify's Handy Helper Classes

Tips for customizing WTForm fields with unique CSS classes

Adding the <a> tag causes Superfish to malfunction

Controlling MYSQL data is not possible