Bootstrap 4样式选择

Question

我正在使用带有Angular 2的bootstrap 4并具有以下选择:

<div class="form-group">
    <label class="col-md-4 control-label" for="OptionExample">Select an option:</label>
    <div class="col-md-4">
        <select id="optionExample" name="optionExample" class="form-control" [(ngModel)]="ngmodeloptionExample"
                (ngModelChange)="optionExamples()">
            <option disabled [ngValue]="-1">Select an Option</option>
            <option *ngFor="let option of options" [ngValue]="option">{{option.property }}</option>
        </select>
    </div>
</div>

我有可能设计这个样式吗？我尝试添加一些bootstrap类,但没有运气.我愿意使用Typescript或javascript,但是使用像这样的库有困难:https://silviomoreto.github.io/bootstrap-select/examples/

Answer 1

.selectWrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    border: 1px solid #bbb;
    border-radius: 2px;
    background:#FFFFFF url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2211%22%20height%3D%2211%22%20viewBox%3D%220%200%2011%2011%22%3E%3Cpath%20d%3D%22M4.33%208.5L0%201L8.66%201z%22%20fill%3D%22%2300AEA9%22%2F%3E%3C%2Fsvg%3E') right 13px center no-repeat;
}

.selectWrapper select {
        padding: 12px 40px 12px 20px;
        font-size: 18px;
        line-height: 18px;
        width: 100%;
        border: none;
        box-shadow: none;
        background: transparent;
        background-image: none;
        -webkit-appearance: none;
        outline: none;
        cursor: pointer;
        -moz-appearance: none;
        text-indent: 0.01px;
        text-overflow: ellipsis;
    }

<div class="selectWrapper">
    <select>
        <option>Lorem</option>
        <option>Parturient</option>
        <option>Euismod</option>
    </select>
</div>