# Change Inputs.select font size

**URL:** <https://talk.observablehq.com/t/change-inputs-select-font-size/8890>\
**Category:** Help\
**Created:** [March 4, 2024, 8:06pm UTC](https://talk.observablehq.com/t/change-inputs-select-font-size/8890 "2024-03-04T20:06:16Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![boshek](https://avatars.discourse-cdn.com/v4/letter/b/ba8739/32.png) [@boshek](https://talk.observablehq.com/u/boshek)\
**Post date:** [March 4, 2024, 8:06pm UTC](https://talk.observablehq.com/t/change-inputs-select-font-size/8890/1 "2024-03-04T20:06:16Z")

</div>

I asked this question some time ago: [Increase width a select dropdown](https://talk.observablehq.com/t/increase-width-a-select-dropdown/8065)

I was able to modify the width of the visible dropdown with the `width` parameter. Great. But it seems like there is a upper limit to the size. In a Framework chunk I have something like this:

```auto
const bigLong = ["BOYER (RIVIERE) A 0,1 KM EN AVAL DU PONT DE TRAIN A SAINT-CHARLES DE BELLECHASSE", 
"CASCAPEDIA (PETITE RIVIERE) A 0.9 KM RIVE DROITE AVAL PONT-ROUTE A SAINT-EDGAR", 
"SAINTE-MARGUERITE NORD-EST (RIVIERE) A 1,7 KM DE LA RIVIERE SAINTE-MARGUERITE", 
"COULONGE (RIVIERE) AU PONT TERRY-FOX QUI MENE AU CLUB DE GOLF DE PONTEFRACT", 
"ANGLAIS (RIVIERE DES) A 1,1 KM EN AVAL DU PONT-ROUTE A TRES-SAINT-SACREMENT", 
"MILLE-ILES (RIVIERE DES) EN AVAL DU BARRAGE GRAND-MOULIN A DEUX-MONTAGNES", 
"LAKE OF THE WOODS WESTERN OUTLET ABOVE NORMAN DAM AND POWERHOUSE SITE NO.1", 
"LAKE OF THE WOODS WESTERN OUTLET ABOVE NORMAN DAM AND POWERHOUSE SITE NO.2", 
"LAKE OF THE WOODS WESTERN OUTLET ABOVE NORMAN DAM AND POWERHOUSE SITE NO.3", 
"LIEVRE (RIVIERE DU) A 2,2 KM EN AMONT DU PONT-ROUTE 311 A LAC-SAINT-PAUL"]
const reduceFont = view(Inputs.select(bigLong, {label: "Select a river", value: bigLong[0], width: 2000}))

```

Above a certain value of width, the dropdown doesn’t change. But really my actual issue is that the labels are too long and spill over the popup. So is there any way to reduce the font size in the popup? This text inside this popup:

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/6/69bf852b1d3f376a046aa2a803d4bab1351d0d99.png)

Can that font be reduced in any way?

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [March 4, 2024, 10:48pm UTC](https://talk.observablehq.com/t/change-inputs-select-font-size/8890/2 "2024-03-04T22:48:42Z")

</div>

The dropdown is a native element. Its styling capabilities differ from system to system and from browser to browser.

I would recommend to either adapt your text (e.g. lowercase it to save space), or to use radio buttons instead (e.g. via Inputs.radio).

---

<div class="post-metadata">

**Author:** ![boshek](https://avatars.discourse-cdn.com/v4/letter/b/ba8739/32.png) [@boshek](https://talk.observablehq.com/u/boshek)\
**Post date:** [March 5, 2024, 4:49am UTC](https://talk.observablehq.com/t/change-inputs-select-font-size/8890/3 "2024-03-05T04:49:08Z")

</div>

Yeah I know that’s totally a reasonable suggestion. Unfortunately I am stuck with a super long string in this case.

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [March 5, 2024, 10:17am UTC](https://talk.observablehq.com/t/change-inputs-select-font-size/8890/4 "2024-03-05T10:17:13Z")

</div>

With native select there’s no way to reduce the font size. You could replace the select with a [Choices](https://github.com/Choices-js/Choices) widget which would also give you a search box and a preview that can wrap lines.

---

<div class="post-metadata">

**Author:** ![mcmcclur](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mcmcclur/32/2364_2.png) [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)\
**Post date:** [March 5, 2024, 11:29am UTC](https://talk.observablehq.com/t/change-inputs-select-font-size/8890/5 "2024-03-05T11:29:46Z")

</div>

> [@boshek](#):
>
> Unfortunately I am stuck with a super long string in this case.

Perhaps you could use the `format` option to modify the strings?

```
view(Inputs.select(bigLong, {
  format: (s) => {
    let w = s.split(" ");
    return `${w[0]} ... ${w.slice(-1)[0]}`;
  }
}))

```

Of course, that’s just one example output; it could be anything your want.