cordova – 离子3输入字段圆角和图标

概述我正在开发一个离子3移动应用程序,我必须在其中设计一个带有输入字段的登录页面,左侧有一个带圆角的图标.但是离子中的某个人决定人们不再需要输入元素的边界,他们将所有输入样式都作为下划线. 我尝试了很多方法来实现它,但我无法将其拉下来.如果我使用自定义元素而不是离子元素,我可以获得布局,但它与响应式设计混淆,特别是键盘,键盘不会出现. 谁可以帮我这个事？是我的标记. <ion-content padd 我正在开发一个离子3移动应用程序,我必须在其中设计一个带有输入字段的登录页面,左侧有一个带圆角的图标.但是离子中的某个人决定人们不再需要输入元素的边界,他们将所有输入样式都作为下划线.

我尝试了很多方法来实现它,但我无法将其拉下来.如果我使用自定义元素而不是离子元素,我可以获得布局,但它与响应式设计混淆,特别是键盘,键盘不会出现.

谁可以帮我这个事？是我的标记.

<ion-content padding>      <div text-center >      <img  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  type="submit" ion-button full favourite [Disabled]="!signInForm.valID">Sign In</button>      </form>    </ion-content>

解决方法 这是我如何做到的：

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,0.4);    margin-bottom: 1px;    .label {      wIDth: 10%;      color: rgba(0,0.6);      Font-size: 1.2em;    }  }

你可以得到这样的东西：

可能你需要直接使用类名而不是离子项……

总结

以上是内存溢出为你收集整理的cordova – 离子3输入字段圆角和图标全部内容，希望文章能够帮你解决cordova – 离子3输入字段圆角和图标所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。