Guide to customizing the Bootstrap select dropdown in Angular 13, without the use of any third-party plugins, by incorporating border radius adjustments and

I am currently utilizing Bootstrap select dropdown, however, I am looking to customize its appearance to match the image provided below without the need for additional plugins. I have attempted a few methods but none have been successful. The new dropdown design should maintain the same functionality as a standard select dropdown, including the ability to bind dropdown values to the select field and retrieve the selected value.

View demo here

Here is the 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>

And here is the 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;
}

The desired design should resemble this image:

https://i.sstatic.net/CLESv.png

cssangularbootstrap-4bootstrap-5

Answer №1

Here is the solution you requested...

Method 1:

ngx-bootstrap

To view the StackBlitz snippet, click here.

UPDATE

Method 2:

ng-bootstrap

To view the StackBlitz snippet, click here.

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  clickMessage = 'Select an option';

  getText(text) {
    this.clickMessage = text;
  }
}

app.component.html

<body class="p-3">
  <div class="row">
    <div class="col">
      <div ngbDropdown class="d-inline-block">
        <button
          type="button"
          class="btn btn-outline-primary"
          id="dropdownBasic1"
          ngbDropdownToggle
        >
          {{ clickMessage }}
        </button>
        <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
          <button
            ngbDropdownItem
            class="nav-link"
            href="#"
            (click)="getText($event.target.innerText)"
          >
            Option 1
          </button>
          <button
            ngbDropdownItem
            class="nav-link"
            href="#"
            (click)="getText($event.target.innerText)"
          >
            Option 2
          </button>
          <button
            ngbDropdownItem
            class="nav-link"
            href="#"
            (click)="getText($event.target.innerText)"
          >
            Option 3
          </button>
        </div>
      </div>
    </div>
  </div>
</body>

app.component.css

.btn {
  width: 200px;
  color: black;
  background-color: white;
  border: 1px solid black;
  border-radius: 10px;
}

button:focus,
button:active {
  color: black;
  background-color: white;
  border: 1px solid black;
  outline: none !important;
  box-shadow: none !important;
}

.dropdown-menu {
  width: 100%;
  border: none;
  box-shadow: 2px 5px 5px #dcdcdc;
  border-radius: 10px;
}

.nav-link {
  color: black;
}

.nav-link:hover,
.nav-link:focus {
  color: black;
  border: none;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Aligning HTML form elements side by side

I am having trouble displaying multiple Bootstrap elements and buttons in a single line. Here is an example of what I have: <span><input class="form-control" id="filename" value="Select a ZIP file to upload..." disabled style="display: inline"> ...

jqueryhtmlcsstwitter-bootstrap

Setting up an angular2 web application on an Nginx server and forwarding HTTP requests to the backend API for

Seeking assistance with setting up angular2 routes and proxying http requests to a rest api on a separate server Currently, I have an angular2 web application running on an nginx server which serves the static html files. The rest api that the application ...

angularapinginxproxy

The functionality of the Javascript window.print() method is limited to a single use

I've been working on an Angular project and I have the following code snippet implemented in one of the components. Everything works fine when I try to print for the first time using the onClickPrint() method, but it doesn't seem to trigger when ...

javascriptangular

Deactivating Google Map Clustering for Individual Markers

I'm currently utilizing Angular 4, Google Maps v3, and Marker Clusterer v2 - all of which are the latest versions. I'm attempting to implement a straightforward example found in the official Google Maps documentation (https://developers.google.co ...

angulargoogle-mapstypescriptgoogle-maps-api-3markerclusterer

Manage both the return of an observable and the setting of a value within a single method using

I am in need of a service that can both return an observable and set a value to a field within the same method. The current implementation of my userService.getUserDetails() method is as follows: private requestUrl: string; private bic: string; private i ...

angulartypescripthttp

The incorrect sequence of Angular/Protractor functions is causing issues within the tests

Trying to extract the values from a column in a grid and compare them before and after sorting can be tricky. I have two functions set up for this task - one to retrieve the initial column values, and another to check the order post-sorting. However, there ...

javascriptjqueryangularjsangularprotractor

Is the rotate() method in SVG supported on web browsers when passing in additional parameters like angle, centerX, and centerY similar to the CSS rotate

I have recently learned about a rotate transform that allows for rotating around a specified center point using the `rotate(angle, centerX, centerY)` method. However, I have noticed that this method does not seem to work when applied via CSS. Interestingl ...

htmlcsssvg

What is the method for including a TabIndex property in a JSON file?

https://i.sstatic.net/ISi72.png I discussed the integration of HTML fields within a JSON file and highlighted how to utilize the TabIndex property effectively in JSON files. ...

c#htmlangulartypes

How do I switch the background-image on li hover and revert it back when I move off the li element?

Looking to update the background image of a div upon hovering over a li element? Check out this example here. So far, I've got that part working fine. But now I want the background picture to revert back to its original CSS when I move away from the l ...

javascriptjqueryhtmlcssbackground-image

Determining the screen width of mobile devices across the board

While using the Google Chrome inspector to simulate the Galaxy S5 (360px) screen, I am encountering issues with detecting the correct screen width. The CSS for 360px is being overridden by the 768px CSS instead. Is there a more effective solution to this ...

htmlcss

Prevent the wrapping of elements in an expanded hover state

Check out the Latest Demo: https://fiddle.jshell.net/Benihana77/cjtg5ojf/ The Scenario: I have designed a versatile promo where the main text and the button/link text can vary in length. The button/link is placed inline, with an extended arrow that expan ...

css

Require an additional button to dynamically load more content and shift all existing elements further down the page

I am looking to implement a "load more" button for an Instagram feed on my website. My current approach involves increasing the height of a specific section while moving the rest of the page down. This is what I have tried: <script> $(document.ready ...

javascriptjqueryhtmlcss

I want to create CSS columns that stretch to the full height of the window, positioned between a header and a footer, while also

I am looking to create a basic HTML layout with CSS that includes a header and two columns. The right column should have a fixed width of 100px, while the left column may have varying content lengths. I want both columns to stretch to the footer. Below is ...

htmlcss

Exploring ways to access an element's background color through JavaScript

Is there a way to access an element's CSS properties that are set by a class name in JavaScript? In the case of the first div element, I have applied a "red" class which sets its background color to red. However, when I try to access the div's b ...

javascripthtmlcss

When developing a website with HTML/CSS, is it recommended to utilize tables for organizing content

Seeking guidance as a novice in web development. I am planning to design a table with input fields that will be sent to the server upon submission. What is the preferred method for achieving this? Is it advisable to utilize html-tables or would it be more ...

htmlcsshtml-table

Display the entire width of the element without obstructing any subsequent elements

I have a main container with an inner container. I want the inner container to span the full width of the screen. The challenge is that I can't simply set the inner container's width to 100vw because it is nested within the main container, which ...

htmlcss

Exploring the concept of data model inheritance in Angular 2

In my Angular2 and ASP.NET Core project, I have set up the following: My C# .NET Core API returns the following classes: public class fighter { public int id { get; set; } public string name { get; set; } public datetime birthdate { get; set; } p ...

c#angularjsangularasp.net-web-api

Utilizing autocomplete feature for Google Maps API search within Ionic 3

Currently, I am exploring the world of Google APIs and attempting to incorporate the Google Maps plugin into Ionic3. My main goal is to retrieve the geocordinates of any location entered by a user in the search bar. This requires integrating the autocomple ...

angulargoogle-mapsionic-frameworkionic3ionic-native

Having trouble displaying nested routes in Angular within the view

I'm encountering some issues with child/nested routes in Angular 4. In the app.module.ts file, my imports statement looks like this: RouterModule.forRoot([ { path: 'templates', component: TemplateLandingC ...

htmlangulartypescriptsingle-page-applicationangular-router

What is the solution to the strict mode issue in ANGULAR when it comes to declaring a variable without initializing it?

Hi everyone! I'm currently learning Angular and I've encountered an issue when trying to declare a new object type or a simple string variable. An error keeps appearing. this_is_variable:string; recipe : Recipe; The error messages are as follows ...

angulartypescript