ionic 3 input field rounded corner and icon

Question

I am working on an ionic 3 mobile app in which I had to design a login page with input fields which have an icon in the left and with rounded corners. But someone in ionic decided that people don't need borders for input elements anymore and they made all the input styles as underlined.

I tried so many ways to accomplish it but I couldn't pull it off. If I use custom elements instead of ionic ones I can get the layout but it messes with responsive design and especially with the keyboard, keyboards don't come up.

Can anyone help me on this? is my markup.

 <ion-content padding>
      <div text-center class="logo-container">
      <img class="login-logo" src="./assets/imgs/clean_connect.png" alt="Logo of clean connect">
        <h4>Sign in to your account</h4>
      </div>
      <form [formGroup]="signInForm" (submit) = "login(signInForm.value)" novalidate>
        <ion-list>  

          <ion-item>
            <ion-label><ion-icon name="ios-person-outline" item-left></ion-icon></ion-label>
            <ion-input type="text" value="agira" placeholder="Username" formControlName="username"></ion-input>
          </ion-item>
          <ion-item no-lines  *ngIf="!signInForm.controls.username.valid && (signInForm.controls.username.dirty)">
          <div>
            Please enter valid Username
          </div>
          </ion-item>
          <ion-item>
            <ion-label><ion-icon name="ios-lock-outline" item-left></ion-icon></ion-label>
            <ion-input type="password" value="Agira1" placeholder="Password" formControlName="password"></ion-input>
          </ion-item>
          <ion-item no-lines *ngIf="!signInForm.controls.password.valid && (signInForm.controls.password.dirty)">
          <div>
            Please enter Password
          </div>
          </ion-item>
        </ion-list>
        <button class="sign-in" type="submit" ion-button full favourite [disabled]="!signInForm.valid">Sign In</button>
      </form>
    </ion-content>

Answer 1

Here's how I made it:

ion-item:first-child {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
  ion-item:last-child {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  ion-item.item {
    background-color: rgba(255, 255, 255, 0.4);
    margin-bottom: 1px;
    .label {
      width: 10%;
      color: rgba(0, 0, 0, 0.6);
      font-size: 1.2em;
    }
  }

You can get something like this:

Probably you'll need to use class names instead of the ion-item directly...

Answer 2

i have make it in my project here is the code, this code makes your ion-input rounded. I hope this works for you

 ion-item {
     border-radius: 30px !important;
     padding-left: 30px !important;
     font-size: 0.9em;
     margin-bottom: 10px;
     border: 1px solid #ffffff;
     border-bottom: 0px !important;
     box-shadow: none !important;
 }