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

Ionic Framework
1

ion-selectArrow
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;
}
`

2

Apply following css

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

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

4

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

5

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

1 Like
6

Try this.
good luck!

7

Try this for ionic5,

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

ion-radio-group{

    ion-radio{
        visibility: hidden;
}
8

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

this little piece of css will go into your

global.scss

ion-select::part(icon) {

   display: none !important;

}