Question

我试图隐藏选择输入上的箭头，并且对于我的生活，这似乎在chrome中不起作用，即使它看起来是正确的：

select:disabled {
    border-bottom-color: transparent !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    &::-ms-expand {
        display: none !important;
    }
}

https://codepen.io/sandra-willford/pen/NMdjKW

Answer 1

问题是您将所有类添加到禁用的类。工作解决方案是

select {
    border-bottom-color: transparent !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    &::-ms-expand {
        display: none !important;
    }
}

但是如果你只想在禁用选择时添加这些样式，请执行此操作。

<select disabled></select>

Answer 2

事实证明，因为我也在使用bootstraps .form-control类，BS还在它的样式表上添加了一个background base64图像，所以添加了以下内容解决了这个问题。

select:disabled {
    background-image: none;
    border-bottom-color: transparent !important;
    -webkit-appearance: textfield !important;
    -moz-appearance: textfield !important;
    appearance: none !important;
    &::-ms-expand {
        display: none !important;
    }
}

禁用时选择隐藏的箭头

2 个答案: