Question

我的Web应用程序具有用于输入和选择元素的SCSS样式，但是由于某些原因，尽管在计算机上正确显示了样式，但在移动设备上没有显示该样式。有谁知道为什么会这样？下面的CSS代码

.text-input {
  background: $dark-grey;
  border: 1px solid $off-white;
  color: $off-white;
  font-size: $font-size-medium;
  font-weight: 300;
  margin: 0 auto $s-size auto;
  max-width: 100%;
  padding: $s-size;
  width: 90rem;
}

.text-input::placeholder {
  color: $off-white;
}

.select {
  @extend .text-input;
}

Answer 1

添加webkit外观

 .text-input {
      background: $dark-grey;
      border: 1px solid $off-white;
      color: $off-white;
      font-size: $font-size-medium;
      font-weight: 300;
      margin: 0 auto $s-size auto;
      max-width: 100%;
      padding: $s-size;
      width: 90rem;
      -webkit-appearance:none; // add this to add custom design cross-browser
    }

    .text-input::placeholder {
      color: $off-white;
    }

    .select {
      @extend .text-input;
    }

select标签的SCSS样式仅在移动设备上不起作用

1 个答案: