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


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.



<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.form-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='' xmlns: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:

sample UI


Here you go…

Solution 1:


See the StackBlitz snippet here.


Solution 2:


See the StackBlitz snippet here.

Answered By – Cervus camelopardalis

Answer Checked By – Timothy Miller (AngularFixing Admin)

Leave a Reply

Your email address will not be published.