Question

我需要在禁用时隐藏选择框上的下拉箭头。从我读过的每件事情中，这应该有用吗？

select.btn-underline-primary {
    box-shadow: none !important;
    padding-left: 0;
    color: $dark !important;
    option {
        border: none;
    }
    &:disabled {
        border-bottom-color: transparent;
        &::-ms-expand {
            display: none;
        }
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
}

Answer 1

问题是，将display: none应用于 ::ms-expand 只会隐藏Internet Explorer 10和11的下拉列表。如果您还想为Firefox / Chrome隐藏它，您需要分别将{strong> -moz-appearance: none 和 -webkit-appearance: none 应用于select。

请注意，:disabled是select元素本身的属性，不会在DOM中创建单独的伪类。因此，您需要一个单独的选择器：

select.btn-underline-primary:disabled

与其余代码结合使用的内容如下：

select.btn-underline-primary {
  box-shadow: none !important;
  padding-left: 0;
  color: $dark !important;
  option {
    border: none;
  }
  &::-ms-expand {
    display: none; /* Hide dropdown in IE 10 & 11 */
  }
}

select.btn-underline-primary:disabled {
  border-bottom-color: transparent;
  -moz-appearance: none; /* Hide dropdown in Firefox */
  -webkit-appearance: none; /* Hide dropdown in Chrome */
}

可以看到 JSFiddle 。

scss hide选择箭头，外观＆amp; -webkit-appearance：none;不工作

1 个答案: