Question

我在侧边栏中有一个select元素。侧边栏可以折叠，这会导致其中的所有内容都更改为图标。当发生这种情况时，我希望select只显示箭头按钮（单击它时仍应打开完整的下拉列表），但宽度不会低于某个点，它仍会显示一小部分空白框（据我所知，没有连接到任何填充或边距）。有没有办法做到这一点？我能找到的唯一相关问题是隐藏按钮。

标记：

<select [ngClass]="{'account-selector': !sidebarCollapsed, 'account-selector-collapsed': sidebarCollapsed}" [(ngModel)]="selectedAccount" (change)="setSelectedAccount()">
    <option *ngFor="let account of accounts" [ngValue]="account" [selected]="account === selectedAccount">{{account.data.Name}}</option>
</select>

CSS：

.account-selector {
    max-width: 90%;
}

.account-selector-collapsed {
    // what goes here?
}

Answer 1

使用此CSS：

.account-selector-collapsed {
    cursor: pointer;
    width: 15px;
    height: 15px;
    font-size: 0; // hides the text for the current selection
    border: 0;
    background: white; // TODO: replace with an appropriate image
    -moz-appearance: none;
    -webkit-appearance: none;
}
.account-selector-collapsed::-ms-expand {
    display: none;
}

密钥是-moz/webkit-appearance: none;，它实际上将其转换为可以自由设置样式的纯文本框，::-ms-expand在IE / Edge上提供类似的用途。我无法彻底测试后者（我在Mac上工作，我的Windows VM出现了问题），但它似乎可以在我能够测试的地方工作，并且肯定适用于其他浏览器。

隐藏选择元素

1 个答案: