# CSS Enlarge font size in a Number Picker

**URL:** https://community.glideapps.com/t/css-enlarge-font-size-in-a-number-picker/31790
**Category:** Ask for Help
**Created:** [September 14, 2021, 9:03pm UTC](https://community.glideapps.com/t/css-enlarge-font-size-in-a-number-picker/31790 "2021-09-14T21:03:08Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Alexis\_AZOULAI](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alexis_azoulai/32/20550_2.png) [@Alexis\_AZOULAI](https://community.glideapps.com/u/Alexis_AZOULAI)
#### Post date: [September 14, 2021, 9:03pm UTC](https://community.glideapps.com/t/css-enlarge-font-size-in-a-number-picker/31790/1 "2021-09-14T21:03:08Z")

</div>

Hello everybody,

I used this @Uzo 's CSS code :

```auto
<pre><span><style>
[data-test="app-text-field"]{
position: center;
backdrop-filter: blur(0px);
background: #F2BE24;
border-radius: 50px;
width: 60%;
padding: 2px 20px 12px;
}

```

But I would like to make the font heighter and I can’t do it by just using “Font-size: 20px;”  
Does anyone have an idea?

Thanks

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [September 14, 2021, 11:38pm UTC](https://community.glideapps.com/t/css-enlarge-font-size-in-a-number-picker/31790/2 "2021-09-14T23:38:01Z")

</div>

What do you mean “heighter”? Do you mean more space for the line that stores the text?

---

<div class="post-metadata">

### Author: ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)
#### Post date: [September 15, 2021, 1:03am UTC](https://community.glideapps.com/t/css-enlarge-font-size-in-a-number-picker/31790/3 "2021-09-15T01:03:05Z")

</div>

Hi, Alexis  
If you want to make the letters bigger, try the code below.

```auto
<pre><span><style>
 [data-test="app-text-field"]> :nth-of-type(1) {
 background: #F2BE24;
 width: 50%;
 height:50px;
 border-radius: 25px;
 }
 [data-test="app-tf-number-input"] {
 font-size: 30px !important;
 padding-left: 10%;
 text-align: center; 
 color: #fff !important;
 }

```

---

<div class="post-metadata">

### Author: ![Alexis\_AZOULAI](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alexis_azoulai/32/20550_2.png) [@Alexis\_AZOULAI](https://community.glideapps.com/u/Alexis_AZOULAI)
#### Post date: [September 15, 2021, 2:28pm UTC](https://community.glideapps.com/t/css-enlarge-font-size-in-a-number-picker/31790/4 "2021-09-15T14:28:52Z")

</div>

> [@hisashi.fujita](#):
>
> ```auto
> <pre><span><style>
> [data-test="app-text-field"]> :nth-of-type(1) {
> background: #F2BE24;
> width: 50%;
> height:50px;
> border-radius: 25px;
> }
> [data-test="app-tf-number-input"] {
> font-size: 30px !important;
> padding-left: 10%;
> text-align: center; 
> color: #fff !important;
> }
> 
> ```

Thank you very much 🙏 🙏 🙏

---

<div class="post-metadata">

### Author: ![NoCodeAndy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nocodeandy/32/62530_2.png) [@NoCodeAndy](https://community.glideapps.com/u/NoCodeAndy)
#### Post date: [January 17, 2024, 4:50pm UTC](https://community.glideapps.com/t/css-enlarge-font-size-in-a-number-picker/31790/5 "2024-01-17T16:50:39Z")

</div>