# How to increase the size of ion-select arrow button in ionic 4?

**URL:** <https://forum.ionicframework.com/t/how-to-increase-the-size-of-ion-select-arrow-button-in-ionic-4/160572>\
**Category:** Ionic Framework\
**Created:** [April 2, 2019, 7:09am UTC](https://forum.ionicframework.com/t/how-to-increase-the-size-of-ion-select-arrow-button-in-ionic-4/160572 "2019-04-02T07:09:48Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![ngodup](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ngodup/32/115216_2.png) [@ngodup](https://forum.ionicframework.com/u/ngodup)\
**Post date:** [April 2, 2019, 7:09am UTC](https://forum.ionicframework.com/t/how-to-increase-the-size-of-ion-select-arrow-button-in-ionic-4/160572/1 "2019-04-02T07:09:48Z")

</div>

![ion-selectArrow](https://global.discourse-cdn.com/ionicframework/original/3X/5/4/5493bfc82ca2930b3fb9993ad6dfaf2a95b9a26e.png)  
I want to change the size of the ion-select arrow button in ionic 4, I used the following style but it didn’t work.  
.select-icon-inner {  
top: 50%;  
border-top: 10px solid!important;  
border-right: 10px solid transparent!important;  
border-left: 10px solid transparent!important;  
left: -4px!important;  
pointer-events: none;  
}  
`

---

<div class="post-metadata">

**Author:** ![Heenavora](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/heenavora/32/120922_2.png) [@Heenavora](https://forum.ionicframework.com/u/Heenavora)\
**Post date:** [April 2, 2019, 7:51am UTC](https://forum.ionicframework.com/t/how-to-increase-the-size-of-ion-select-arrow-button-in-ionic-4/160572/2 "2019-04-02T07:51:51Z")

</div>

Apply following css

```auto
.select-icon-inner {
    left: -5px;
    margin-top: -6px;
    border-top: 14px solid;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
}

```

---

<div class="post-metadata">

**Author:** ![ngodup](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ngodup/32/115216_2.png) [@ngodup](https://forum.ionicframework.com/u/ngodup)\
**Post date:** [April 2, 2019, 8:03am UTC](https://forum.ionicframework.com/t/how-to-increase-the-size-of-ion-select-arrow-button-in-ionic-4/160572/3 "2019-04-02T08:03:47Z")

</div>

> [@Heenavora](#):
>
> .select-icon-inner { left: -5px; margin-top: -6px; border-top: 14px solid; border-right: 10px solid transparent; border-left: 10px solid transparent; }

@Heenavora, thanks. I add above style in a page, variable and global.scss, but still it doesn’t work Ionic 4.

---

<div class="post-metadata">

**Author:** ![Heenavora](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/heenavora/32/120922_2.png) [@Heenavora](https://forum.ionicframework.com/u/Heenavora)\
**Post date:** [April 2, 2019, 8:06am UTC](https://forum.ionicframework.com/t/how-to-increase-the-size-of-ion-select-arrow-button-in-ionic-4/160572/4 "2019-04-02T08:06:23Z")

</div>

> [@ngodup](#):
>
> .select-icon-inner

Add css for this class in a specific page you want, add more specific parents classes or ids or if you want it in whole app, use **!important**

---

<div class="post-metadata">

**Author:** ![ngodup](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ngodup/32/115216_2.png) [@ngodup](https://forum.ionicframework.com/u/ngodup)\
**Post date:** [April 2, 2019, 8:17am UTC](https://forum.ionicframework.com/t/how-to-increase-the-size-of-ion-select-arrow-button-in-ionic-4/160572/5 "2019-04-02T08:17:48Z")

</div>

@Heenavora, I did add in a specific page and add above css in ion-select but it didn’t work in ionic 4. In the login page, I have a ion-select drop down and I add following code in login scss file.  
ion-select {  
font-size: 22px;  
.select-icon-inner {  
left: -5px !important;  
margin-top: -6px !important;  
border-top: 14px solid !important;  
border-right: 10px solid transparent !important;  
border-left: 10px solid transparent !important;  
}  
}  
I guess it because of Ionic 4 shadow root, overwirte above code. I am not sure.

---

<div class="post-metadata">

**Author:** ![bbigotes](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/bbigotes/32/126994_2.png) [@bbigotes](https://forum.ionicframework.com/u/bbigotes)\
**Post date:** [July 18, 2019, 1:29am UTC](https://forum.ionicframework.com/t/how-to-increase-the-size-of-ion-select-arrow-button-in-ionic-4/160572/6 "2019-07-18T01:29:09Z")

</div>

Try this.  
good luck!

> <https://stackoverflow.com/questions/55300777/how-to-remove-small-caret-from-ion-select-in-ionic4>

---

<div class="post-metadata">

**Author:** ![darshanpatel14](https://avatars.discourse-cdn.com/v4/letter/d/258eb7/32.png) [@darshanpatel14](https://forum.ionicframework.com/u/darshanpatel14)\
**Post date:** [August 18, 2020, 5:43am UTC](https://forum.ionicframework.com/t/how-to-increase-the-size-of-ion-select-arrow-button-in-ionic-4/160572/7 "2020-08-18T05:43:45Z")

</div>

Try this for ionic5,

```auto
<ion-radio-group formControlName="taskname" appNoArrow>
        <ion-grid>
          <ion-row>
            <ion-col size="3">
                <ion-label>To-Do</ion-label>
                <ion-radio [value]="ToDo"></ion-radio>
            </ion-col>
            <ion-col size="3">
                <ion-label>Call</ion-label>
                <ion-radio [value]="Call"></ion-radio>
            </ion-col>
            <ion-col size="3">
                <ion-label>Email</ion-label>
                <ion-radio [value]="Email"></ion-radio>
            </ion-col>
            <ion-col size="3">
                <ion-label>Meeting</ion-label>
                <ion-radio [value]="Meeting"></ion-radio>
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-radio-group>

```

here is the solution…

```auto
ion-radio-group{

    ion-radio{
        visibility: hidden;
}

```

---

<div class="post-metadata">

**Author:** ![adeelshhid](https://avatars.discourse-cdn.com/v4/letter/a/7cd45c/32.png) [@adeelshhid](https://forum.ionicframework.com/u/adeelshhid)\
**Post date:** [February 11, 2021, 12:39pm UTC](https://forum.ionicframework.com/t/how-to-increase-the-size-of-ion-select-arrow-button-in-ionic-4/160572/8 "2021-02-11T12:39:59Z")

</div>

**Use this simple code to modify your component (Work for ionic4 and latest).**

this little piece of css will go into your

> global.scss

```auto
ion-select::part(icon) {

   display: none !important;

}

```