Question

我想弄清楚为什么这些绿色边框线出现在Android上，iOS上的一切看起来都很好 - 这是我的代码和css：

HTML：

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
  <!---->
    <div style="position: absolute; left: 50%; width:35%; z-index: 1">
    <div style="position: relative; left: -50%; width:100%">
      <img (tap)="change()" class="imagesquare" #profsquare src="../../assets/blankprof.png">
    </div>
  </div>
  <ion-navbar>
    <ion-icon (tap)="goToProfile()" class='backk' name="arrow-back"></ion-icon>
  </ion-navbar>

</ion-header>


<ion-content no-padding>
<ion-list>
    <ion-item no-padding class="sect">
        <ion-label>Username</ion-label>
        <ion-input type="text" (keypress)="goButton($event.keyCode)" [(ngModel)]="username" name="username"></ion-input> <!--[(ngModel)]="user.username"-->
    </ion-item>
    <ion-item no-padding class="sect">
      <ion-label>Password</ion-label>
      <ion-input type="text" (keypress)="goButton($event.keyCode)" [(ngModel)]="password" name="password"></ion-input>
    </ion-item>
    <ion-item no-padding class="sect">
    <ion-label>Email</ion-label>
    <ion-input type="text" (keypress)="goButton($event.keyCode)" [(ngModel)]="email" name="email"></ion-input> <!--[(ngModel)]="user.username" name="password"-->
  </ion-item>
  <ion-item no-padding class="sect">
    <ion-label>Salon Address</ion-label>
    <ion-input type="text" (keypress)="goButton($event.keyCode)" placeholder="ex. 28 Jay St, Winston, NJ" [(ngModel)]="address" name="address"></ion-input> <!--[(ngModel)]="user.username" name="password"-->
  </ion-item>
  <ion-item no-padding class="sect">

    <ion-label>Price Range</ion-label>
    <ion-select [(ngModel)]="price">
      <ion-option *ngFor="let z of priceRanges" value="{{z}}">{{z}}</ion-option>
    </ion-select>

    <!--<ion-input type="text" (keypress)="goButton($event.keyCode)" placeholder="ex. 40-80" [(ngModel)]="price" name="price"></ion-input>--> <!--[(ngModel)]="user.username" name="password"-->
  </ion-item>
  <ion-item no-padding class="sect">
    <ion-label>Bio</ion-label>
    <ion-textarea style="width: 65%" placeholder="Bio..." [(ngModel)]="bio" name="bio"></ion-textarea> <!--[(ngModel)]="user.username" name="password"-->
  </ion-item>
</ion-list>

  <div id="savebutton">
    <button class="save" (tap)='logForm()' ion-button round color="primary">Save</button>
  </div>
</ion-content>

SCSS：

page-settings {
    .backk{
        font-size: 36px;
        float: left;
        margin-left: 5px;
    }

    .back-button.show-back-button {
        display: none;
    }

    ion-content {
        top: 0;
        ion-input {
            width:100%;
          border: 0;
          outline: 0;
          background: white;
          display: inline-block;
          margin-left: auto;
          margin-right: auto;
          margin-bottom: 3px;
          color: black;
          font-size: 14px;
        }


        input {
            text-align: right;
        }

        .label-md {
            margin: 0
        }

        ion-label {
            width: 33.3%;
            display: inline-block;
            display: table-cell;
        vertical-align: bottom;
        color: gray;
        font-size: 14px;
        padding-left: 10px;
        }

        .sect {
            width: 100%;
            display: table;
        }

    }

    .imagesquare {
        max-width: 100%;
        height: auto;
        z-index: 1;
        border-style: solid;
        border-width: 2px;
        border-color: white;
    }

    ion-textarea {
        display: inline-block;
        width: 100%;
        font-size: 14px;
    }

    ion-header { 
        height: 20%;

        ion-navbar {
            height: 78%;
            div.toolbar-background {
                background-color: map-get($colors, primary);
            background-repeat: no-repeat;
                background-size: cover;

            }
        }

        .toolbar .toolbar-background {

            border-color: white;
        }
    }

    .save {
        position: relative;
        height: 44px;
    }

    #savebutton {
        text-align: center;
        width: 100%;
        top: 15px;
        position: relative;
    }


}

当我点击某个项目时，底部会加下划线黄色而不是绿色。我搜索了绿色的十六进制值，它在我的项目代码中没有出现。我也不明白为什么它只发生在这三个项目上，所有项目都有相同的scss。

Answer 1

我在浏览器中查看了它，找到要更改的内容并复制并粘贴选择器。这对我有用：

.item-md.item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner, .item-md.item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner {
    border-bottom-color: #dedede;
    -webkit-box-shadow: none;
    box-shadow: none
}

Answer 2

这是在ion-item

中的item-inner类

您只需使用

进行修改即可

ion-item .item-inner{
 border-bottom:1px solid #eee; // or any thing
}

它也有盒子阴影，您也可以修改或设置为无。

离子项目的绿色底部边框显示在Android上，工作iOS - Ionic

2 个答案: