スタイルはIonic 3の入力に影響しません

Question

私のアプリケーションのログインページを作成しようとしています。私が望むようなスタイルが動作しません。しかし、ここでここで問題

1

からの写真はここでlogin.htmlをコード

<ion-content class="app-content padding main-bg text-center"> 
    <div class="logo animated pulse infinite"> 
     <img src="../../assets/imgs/logo1.png" /> 
    </div> 
    <form class="app-form"> 
     <div class="list list-inset"> 
      <label class="item item-input sec-main-text"> 
       <input type="text" class="text-center" placeholder="username"> 
      </label> 
      <label class="item item-input sec-main-text"> 
       <input type="password" class="text-center" placeholder="Password"> 
      </label> 
     </div> 
     <button class="button button-block button-clear main-btn main-bg-color" ng-click="goto('/app/home')">Login</button> 
     <a href="#/register" class="main-text-color">Register</a> 
     <p class="forget" ng-click="forget_password()">Forget Password?</p> 
    </form> 
</ion-content> 

ですlogin.scssコード

です

.app-form .list-inset { 
    margin-left: 0; 
    margin-right: 0; 
    background: none; 
    } 

.app-form { 
    .item-input { 
     margin-bottom: 20px; 
     background: none; 
     border: 1px solid; 
     border-radius: 30px; 
     padding: 5px 10px; 
    } 
    .list-inset .item { 
     border-radius: 30px; 
     height: 46px; 
     &.item-input input { 
     padding: 0; 
     color: white; 
     } 
    } 
    input { 
     &::-webkit-input-placeholder, &:-moz-placeholder { 
     color: white; 
     text-transform: capitalize; 
     } 
    } 
    } 


.app-form .item-select { 
    select { 
     width: 100%; 
     max-width: 100%; 
     background: none; 
     text-align-last: center; 
     padding: 0; 
     text-align: -moz-center; 
     text-align: -webkit-center; 
     text-align-last: -moz-center; 
     text-align-last: -webkit-center; 
     direction: ltr; 
    } 
    &:after { 
     top: 60%; 
     right: 55px; 
    } 
    } 

ここにw帽子私は、元のlogin.htmlと:)

2

から、元のHTMLのブラウザのスクリーンショットから

3

そして、私のアプリのブラウザのスクリーンショットから希望

4

あなたの助け:)

EDIT

After change html tags with ion tags

Answer 1

ためのおかげでイオンはデフォルトのスタイルが追加された、例えば、独自のタグを紹介し、使用しています。あなたとのようなあなたのアプリで標準的なタグを使用しているようだ。入力を

<ion-item> 
    <ion-label>Username</ion-label> 
    <ion-input type="text"></ion-input> 
</ion-item> 

のように変更してください。物事はもっとスムーズになります。

イオニックは簡単だから学ぶのが楽しいです。物事をより簡単にする方法については、Official Docをご覧ください。適切な構文を使用すると、ルールのスタイリングが少なくなります。