Help with ion-select styling

Hello, I got two questions regarding ion-select, it is been difficult to style it like my inputs as for them I use the .native-wrapper, for ion-select i have to use ::part(container) something like:

ion-select.ts =

<ion-select
  label="{{ label | translate }}"
  label-placement="stacked"
  aria-label="label"
  placeholder="{{ placeholder | translate }}"
  [formControl]="control"
  [disabled]="disabled"
>
  <ion-select-option
    *ngFor="let option of options"
    [value]="option[valueProperty]"
    >{{ option[labelProperty] }}</ion-select-option
  >
</ion-select>

general.scss =

ion-select {
  --border-style: none;

  &::part(container) {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 8px;
    background-color: var(--ion-color-light-tint);
  }

  &::part(option) {
    background-color: var(--ion-color-light-tint);
    color: var(--ion-color-dark);
  }
}

It was good, i had the style almost similar to the rest of my inputs with the label on top (a little problem with the icon though)

image

But there was just an issue that i had, the border didn’t take all the borders like the others input, it was using fill=“solid” by default:

image

Using fill=“outline” makes it not working :frowning:, so one of my questions,

  1. Can I put the label like before with fill=“outline” as the label is always there,

image

So I have to remove them from ion-select and add it outside, the only problem is that the options menu wont have a title label anymore:

image

<ion-label
  *ngIf="label"
  class="label-text-wrapper sc-ion-input-md sc-ion-input-ios"
  >{{ label | translate }}</ion-label
>

<ion-select
  fill="outline"
  aria-label="label"
  placeholder="{{ placeholder | translate }}"
  [formControl]="control"
  [disabled]="disabled"
>
  <ion-select-option
    *ngFor="let option of options"
    [value]="option[valueProperty]"
    >{{ option[labelProperty] }}</ion-select-option
  >
</ion-select>
  1. I am having trouble with the select-outline-container, it is taking a lot of space, and i can’t manipulate it as is a shadow-root, I can only style that small part with ::part(container) which it does not takes all the space, so i currently have no ideas to how to approach these.

image