Help me make ion-datetime's style the same as the Input style

I want to make the ion-datetime to have the same style as the input style to make my design consistent.

To be clear, please have a look at the image below.

I’ve tried to modify the CSS properties the same way I created the input style but I can’t get the text to be vertically centered. Applying vertical-align: middle or display: flex with align-items: center doesn’t work. Is there any way to achieve this behavior?

Here is my current CSS for both the input and the datetime:

ion-input,
ion-datetime {
  background-color: #131313;
  border-radius: 10px;
  padding: 0 1.25rem !important;
  margin-top: 0.25rem;
  font-size: 1rem;
}

And here is my template if necessary:

<IonItem lines="none" class="ion-no-padding">
  <IonLabel position="stacked">Birth Place</IonLabel>
  <IonInput v-model="data.birthplace" />
</IonItem>

<IonItem lines="none" class="ion-no-padding">
  <IonLabel position="stacked">Birth Date</IonLabel>
  <IonDatetime id="datetime-input" v-model="data.birthdate" />
</IonItem>

9 posts - 2 participants

Read full topic