How to create a form with text boxes with an image and rounded corner


#1

Why I can’t easily control the borders if input elements to acheive a rounder cornered text boxes. I understand we don’t do rounded corner anymore but sometimes the client wants a design that’s 20 years old and I must do it. The framework I use should have the flexibility of choosing the design I wanted to acheive. But in ionic that’s not the case. I can’t achieve rounded corners in any way. Can anyone please tell me how to acheive a text box with icon in the left and rounded corners?

I am using ionic 3, the below is my markup

  <div text-center class="logo-container">
  <img class="login-logo" src="./assets/imgs/clean_connect.png" alt="Logo">
    <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>```