ionic 3 输入字段圆角和图标答案

【问题标题】：ionic 3 input field rounded corner and iconionic 3 输入字段圆角和图标
【发布时间】：2018-05-13 00:21:52
【问题描述】：

我正在开发一个 ionic 3 移动应用程序，在该应用程序中，我必须设计一个登录页面，该页面的输入字段在左侧有一个图标并带有圆角。但是 ionic 中的某个人决定人们不再需要输入元素的边框，他们将所有输入样式都设为下划线。

我尝试了很多方法来完成它，但我无法成功。如果我使用自定义元素而不是离子元素，我可以获得布局，但它会与响应式设计，尤其是键盘混淆，键盘不会出现。

谁能帮我解决这个问题？是我的标记。

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

【问题讨论】：

你可以添加自定义类并设计它..
@SurajRao 有没有我可以遵循的示例，我的意思是我尝试了很多东西，但每个都有一些问题。你以前用 ionic 3 做过吗？
我认为您必须使用离子输入组件，但要改变它们的样式。
在您的 ion-input 标签中尝试使用 @SurajRao 提到的自定义 css 类。就像在页面的 sass 文件中一样，写一些东西 .custom-css{ border: 1px; border-radius: 5px; border-color: red; }

标签： cordova ionic-framework ionic3 hybrid-mobile-app

【解决方案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;
    }
  }

你可以得到这样的东西：

您可能需要直接使用类名而不是 ion-item...

【讨论】：

【解决方案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;
 }

【讨论】：