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

【问题标题】：SCSS style for select tag not working on mobile only选择标签的 SCSS 样式仅在移动设备上不起作用
【发布时间】：2018-12-08 10:38:07
【问题描述】：

我的网络应用为输入和选择元素设置了 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;
}

【问题讨论】：

这是整个 CSS 文件吗？如果没有，你能在你的 CSS 中检查 @media 查询吗？也许有规则说只适用于大于某些像素数的屏幕？
嗯，那不是 css，它是一个预处理器，可能是 sass
它是 SCSS。我尝试删除变量，但没有任何区别。

标签： javascript html css sass

【解决方案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;
    }

【讨论】：