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

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;

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;

@Heenavora, thanks. I add above style in a page, variable and global.scss, but still it doesn’t work Ionic 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

@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

Try this.
good luck!

Try this for ionic5,

<ion-radio-group formControlName="taskname" appNoArrow>
            <ion-col size="3">
                <ion-radio [value]="ToDo"></ion-radio>
            <ion-col size="3">
                <ion-radio [value]="Call"></ion-radio>
            <ion-col size="3">
                <ion-radio [value]="Email"></ion-radio>
            <ion-col size="3">
                <ion-radio [value]="Meeting"></ion-radio>

here is the solution…


        visibility: hidden;

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

this little piece of css will go into your


ion-select::part(icon) {

   display: none !important;