Ionic v4: how to change some css of inner class input-wrapper of ion-item?

Ionic Framework
1

I would like to get 3 input fields in line in same ion-item and under a single common floating label such as :
image
but instead I have this:
image
due to the display: flex css attribute in input-wrapper from shadow DOM of ion-item component :
image

I’d like to be able to change it to inline but I can’t find the way

any help around ?

FYI the code is :

       <ion-item>
        <ion-label position="floating">Date of birth</ion-label>
        <ion-input class="day" value="{{day}}" formControlName="day" placeholder=Day"></ion-input>
        <ion-input class="month" value="{{month}}" formControlName="month" placeholder=Month"></ion-input>
        <ion-input class="year" value="{{year}}" formControlName="year" placeholder="Year"></ion-input>
      </ion-item>

.day, .month {
display: inline-block;
width: 80px;
}
.year {
display: inline-block;
width: 170px;
}

1 Like
2

I would suggest some other structure, because I don’t believe <ion-item> enjoys having multiple children who are interested in interaction.