样式不影响 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;
    }
  }

这就是我想要的原始 login.html :)

2

以及来自原始 html 的浏览器截图

3

从我的应用的浏览器截图

4

感谢您的帮助:)

编辑

After change html tags with ion tags

Answer 1

Ionic 引入并使用了自己的标签，例如，添加了默认样式。您似乎在应用程序中使用标准标签，例如 和 。将您的输入更改为

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

事情会更顺利。

Ionic 学起来很有趣，因为它很简单。访问Official Doc，了解如何让事情变得更简单。使用正确的语法，您将不会减少样式规则。