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/

I want to style a select dropdown. The question that you posted is a dropdown CSS only without JavaScript — Bhetzie, Nov 30 '16 at 18:45
the dropdown you see there is a `select` element and you have all the information regarding what you can/can't do with styling a `select` element. — Dekel, Nov 30 '16 at 18:46
I have searched google. There are libraries such as: https://silviomoreto.github.io/bootstrap-select/examples/ I don't know how to get this to work in an angular2 component and I'm open to using other methods so I don't want my question to be specific to this one library. — Bhetzie, Nov 30 '16 at 18:51
It's still styling. Styling is still necessary it's just not CSS only — Bhetzie, Nov 30 '16 at 18:54
These are not helpful comments. I want to style using CSS obviously, but the solution for styling a select could require javascript changes for styles to work. — Bhetzie, Nov 30 '16 at 19:01
These **are** helpful comments **if** you read them carefully. The link I gave you explicitly tells you that you **can't** style (css) a `select` tag. If you want to style something that *looks like* a `select` tag - you can generate it (using other tags, or other libraries), but you **can't** style a ` — Dekel, Nov 30 '16 at 19:02
Ok sure, how do I generate it using other libraries and then add styles? — Bhetzie, Nov 30 '16 at 19:04
The description of the library: "Bootstrap-select is a jQuery plugin that utilizes Bootstrap's dropdown.js to style and bring additional functionality to standard select elements." As mentioned above, it is incompatible with bootstrap 4 and angular 2 — Bhetzie, Nov 30 '16 at 19:07
so find some other lib that does. stackoverflow is not a place to search for libraries... — Dekel, Nov 30 '16 at 19:07
I'm not just looking for libraries. I want to know if it's possible to style using javascript or typescript and CSS. I provided the library as an example of what I want to do because you're trolling me over semantics. — Bhetzie, Nov 30 '16 at 19:08
javascript (and also typescript) is for scripting. css is for styling. i already told you that you can't **style** a ` — Dekel, Nov 30 '16 at 19:09
How do I replace a select and then add styles to it then. The definition of that js library is to style and add functionality to standard select elements. That's what I want to do. I don't need you to tell me things like css is for styling javascript is for scripting. I know that. I want to do something similar to that library and don't know the best option with my technology stack. — Bhetzie, Nov 30 '16 at 19:14
I'm afraid it takes more then just comments here on SO to explain this. — Dekel, Nov 30 '16 at 19:15

score 9 · Accepted Answer · answered Dec 06 '16 at 19:58

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

score 2 · Answer 2 · answered May 02 '19 at 19:10

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

answered May 02 '19 at 19:10

Sam

239
2
12

Bootstrap 4 Style Select

2 Answers2