Ion-select --padding-start not working

Ionic Framework Ionic Angular
1

I’m trying to add padding to the left side of the ion-select options, but setting the --padding-start property on the ion-select element in the css doesn’t do anything. Here is my HTML:

<ion-item>
  <ion-label>Repeats every</ion-label> 
  <ion-select class="freq-dropdown" interface="popover">
    <ion-select-option [value]="Frequency.WEEKLY">Week</ion-select-option>
    <ion-select-option [value]="Frequency.MONTHLY">Month</ion-select-option>
  </ion-select>
</ion-item>

My CSS:

.freq-dropdown {
    --padding-start: 10px !important;
}

I’m using “@ionic/angular”: “^6.7.5” and “@ionic/core”: “^6.7.5”. I’m not looking to upgrade to v7 right now. But I’m using the latest version 6. I’m not sure what I’m missing in my code to add the custom padding to the dropdown.

2

try using
ion-select {
–padding-start: 10px !important;
}

but maybe --padding-start is for v7 ?
i cant remember

3

I figured it out. Turns out the --padding-start was set for the ion-item elements in my global stylesheet file. I removed it and it’s adding the padding correctly now.