隱藏選擇元素的文本部分

我在邊欄中有一個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? 
}

來源

2017-08-11 John Montgomery

您是否嘗試在其中添加'display：none' –

@HimanshuArora隱藏了整個事物，我仍然想顯示按鈕部分。 –

使用按鈕選擇器，然後，如： '.account-selector-collapsed button {display：none;}' –

明白了這個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虛擬機出現問題），但它似乎能夠從我已經能夠測試的地方開始工作，並且對於其他瀏覽器。

來源

2017-08-14 15:49:04

不具有plunker來看看它是如何表現，我只能猜測，你需要做的：

.account-selector-collapsed { 
    width: calc(90% - 10px) /*change 10px to suite your need*/ 
}

來源

2017-08-11 22:15:16 Vega

我花了很多時間嘗試製作select元素樣式。不幸的是，目前這是不可能的。即使您使用css對其進行了樣式化，每個瀏覽器都有自己的方法來呈現本地select框元素。

正如我看到你使用Angular 4（2）。製作您自己的select只需要<div>或任何您想要的元素都非常簡單。

這裏有一些實現的例子。

select.component.html：

<div class="select-options"> 
     <div 
     class="select-option" 
     *ngFor="let option of options" 
     [attr.data-value]="option.id" 
     [class.selected]="option.active" 
     [innerText]="option.title" 
     (click)="selectOption(option.id);" 
     > 
     </div> 
    </div>

select.component.ts：

import { Component, OnInit, Input } from '@angular/core'; 

@Component({ 
    selector: 'app-select', 
    templateUrl: './select.component.html', 
    styleUrls: ['./select.component.scss'] 
}) 
export class SelectComponent implements OnInit { 
    @Input() options: Array<any> = []; 

    constructor() {} 

    ngOnInit() { 

    } 

    selectOption(optionId) { 
    this.options.map(option => period.active = option.id === optionId); 
    } 
}

來源

2017-08-11 22:37:24 Mike

隱藏選擇元素的文本部分

回答

相關問題