イオン3入力フィールド丸い角とアイコン

Question

私は左に丸い角でアイコンを持つ入力フィールドを持つログインページを設計しなければならなかったionic 3モバイルアプリケーションに取り組んでいます。しかし、イオニックの誰かは、人々が入力要素の境界線をもう必要とせず、すべての入力スタイルに下線を引いていると判断しました。

私はそれを達成するために多くの方法を試しましたが、私はそれを取り除くことができませんでした。私がイオン性のものの代わりにカスタム要素を使用すると、レイアウトを得ることができますが、それはレスポンシブなデザインで、特にキーボードでは、キーボードが上がっていません。

誰もが私にこれを助けることができますか？私のマークアップです。私はここに私のプロジェクトでそれを作る必要があり

<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

は、ここで私はそれを作った方法ですのためにこの作品を願って：

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; 
    } 
    } 

あなたはこのような何かを得ることができます。

Round and transparent inputs - image

をおそらくあなたが使用する必要がありますイオンアイテムの代わりにクラス名 ...

Answer 2

コードで、このコードは、あなたのion-inputを丸めます。 私はあなた

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; 
}