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.