how to customise the bootstrap select dropdown with border radius and appearance change in angular13 without using any plugin

Issue

Hi i am using bootstrap select dropdown, but i want to make its appearance look like the below image, but no plugin’s to be installed. i tried in these ways but didnt work. this new dropdown design must have same functionality as normal select dropdown does, like from binding dropdpown values to the select field and giving value of the selected dropdown.

demo

HTML:

<div class="col-3 mb-3">
                <label for="exampleFormControlInput1" class="form-label">Project</label>
                <select class="form-select" aria-label="Default select example" >
                    <option selected value="">Select Project</option>
                    <option value="ACTIVE">Active</option>
                    <option value="Terminate">TERMINATED</option>
                  </select>
                 </div>

CSS:

select.form-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='18' height='18' viewBox='0 0 24 24'><path fill='grey' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>") #fff;
  background-position: 98% 50%;
  background-repeat: no-repeat;
}

Need design like this:

Solution

Here you go…

Solution 1:

ngx-bootstrap

See the StackBlitz snippet here.

---

UPDATE

Solution 2:

ng-bootstrap

See the StackBlitz snippet here.

Answered By – Cervus camelopardalis

Answer Checked By – Timothy Miller (AngularFixing Admin)