Bootstrap 4 Style Select

Question

I'm using bootstrap 4 with Angular 2 and have the following select:

<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>

Is it possible for me to style this? I tried adding some bootstrap classes, but no luck. I am open to using Typescript or javascript, but having difficulty using a library like: https://silviomoreto.github.io/bootstrap-select/examples/

Solution 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> 

Solution 2

now you can do it with Bootstrap 4.1

<select class="custom-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

see docs