javascript - 选择标签的 SCSS 样式仅在移动设备上不起作用

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

标签： javascripthtmlcsssass

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