Question

我正在尝试为我的应用创建一个登录页面。但风格并不像我希望的那样有效，这是来自问题的照片

以下是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>

事情应该顺利进行。

离子学习很有趣，因为它很容易。访问Official Doc，了解如何让事情变得更轻松。使用正确的语法，您不会减少样式规则。

样式不影响Ionic 3中的输入

1 个答案: