Javascript 选择标记的SCSS样式仅在移动设备上不起作用

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

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

---

这就是整个CSS文件吗？如果没有，您可以在CSS中检查@media查询吗？也许有规则说只在大于一定像素数的屏幕上应用？好吧，那不是css，它是一个预处理器，可能sassIt是SCSS。我试着删除变量，但没什么不同。