Modify the color of the downward arrow within a dropdown menu

I'm currently working with ngx paginator and I need to customize the CSS styles to appear in white color. Here is the code I've tried:

HTML

 <div class="paginator__footer-select col col-md-3 offset-md-1 ">
                      <mat-form-field appearance="outline">
                        <mat-label class="paginator__footer-perPage">Per page</mat-label>
                        <select matNativeControl [(ngModel)]="perPage" (ngModelChange)="setPerPage($event)" name="perPage">
                          <option value="10">10</option>
                          <option value="20">20</option>
                          <option value="30">30</option>
                          <option value="40">40</option>
                        </select>
                      </mat-form-field>
                    </div>

SCSS

.paginator__footer {
      padding-top: 42px;
    
      &-select{
        font-size: 12px;
        display: flex;
        align-items: center;
      }


input.mat-input-element {
  color: #ffffff;
}

      &-controls {
        font-size: 18px;
        display: flex;
        align-items: center;
      }

    }

    ::ng-deep {
      .mat-form-field-appearance-outline .mat-form-field-outline {
         color: #ffffff;
      }

      .mat-select-arrow {
        color: white;
      }
      mat-form-field {
         .mat-hint, input, ::placeholder, .mat-form-field-label {
            color: #ffffff;
         }
      }
   }

Result:

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

The issue I'm facing is with changing the arrow to white color. I attempted to use the following code:

.mat-select-arrow {
        color: white;
      }

However, it seems to not have any effect. Can anyone suggest a solution to achieve this?

Answer №1

Utilizing the matNativeControl attribute alters the appearance of the arrow. In this scenario, the recommended approach is to utilize:

.mat-select-arrow:after {
  color: white;
}

Implementing the styling on the pseudo-element after instead of directly applying it to the arrow class.

Answer №2

To make the background white in the .mat-form-field-infix::after class, simply add color: white; as shown below:

::ng-deep {
  .mat-form-field-appearance-outline .mat-form-field-outline {
     color: #ffffff;

     .mat-form-field-infix::after {
       color: #ffffff;
     }
}

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

Customize cursor using CSS

I have a div with overflow: hidden that I am making scrollable by allowing the user to click and drag the background. There are links and buttons within this space. Here is the CSS I am using for this: #div-grabscroll { cursor: url(../img/op ...

Angular - handling Observable<T> responses when using Http.post

One issue I encountered was when trying to implement a method that returns an Observable. Within this method, I utilized http.post to send a request to the backend. My goal was to store the JSON object response in an Observable variable and return it. Howe ...

Is a responsive mega menu with rollover effects available for Bootstrap?

Looking to develop a responsive megamenu for bootstrap 3, I recently came across one that caught my eye: I decided to implement it into my own project at However, I encountered a major issue with the menu functionality on desktop devices, as it requires ...

Exploring how CSS affects backgrounds in the Google Chrome browser

Having an issue with the background on my website. In Firefox and other browsers, the background appears much lighter and whiter compared to Chrome. This is the CSS code for my background: body {background:#ffffff url(../../images/background.jpg); direct ...

Using JavaScript to place image data on the canvas in an overlay fashion

I recently wrote the code below to generate a rectangle on a canvas: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canv ...

Instructions on how to create a horizontal scrolling div using the mouse scroll wheel

I need help with scrolling a div horizontally using the mouse scroll button. My div does not have a vertical scroll and I would like users to be able to scroll horizontally. Can anyone provide guidance on how to achieve this? ...

Using JavaScript to Toggle Visibility of Div Elements

Hi there! I'm having some trouble with a code that is supposed to show/hide div content based on the selection from a jump menu. Unfortunately, it's not working as expected. Here is the snippet of my code: JS: function toggleOther(chosen){ if ( ...

A mobile phone screen cannot be fully filled by an image

I'm working on a way for an image to cover the entire screen of a mobile phone. However, when I preview it on an iPhone through a laptop, the image only covers a small portion of the iPhone's screen rather than filling it completely. Below is the ...

Efficient methods to transfer values or arrays between components in Angular 8 without relying on local storage

I am working on a project that involves two components: a login component and a home component. I need to pass user data from the login component to the home component without using local storage. Is there a way to achieve this in Angular 8? Below is the ...

Revise the data model by using option IDs instead of option values in the selection dropdown

Just getting started with angular js and facing an issue. I have a json value that will determine the content of my html. Specifically, I need to populate a select dropdown with two options and have one automatically selected based on the flag provided in ...

jQuery struggling to parse HTML retrieved through AJAX call

While working on parsing some XML data received from an AJAX request, I encountered a special case that required additional handling. Occasionally, the server would return HTML content, prompting the need for a page reload. However, when attempting to iden ...

Clicking on the parent page prevents the hyperlink inside the iframe from working as expected

I am having an issue with a hyperlink inside an iframe. When I click on it in the parent page, it doesn't work. Here is how it is set up: iframe.html <h1>I'm inner page!</h1> <a id="shared" class="btn" href=&q ...

Exploring the functionality of unordered lists with jQuery

I'm attempting to create a sliding effect on this particular ul li structure. <ul>Toggle between hide() and show() <li class="liclass">This is a paragraph1.</li> </ul> <ul>Toggle between hide() and show() <li class="l ...

The Asp button fails to initiate the function

One area of concern I have is with the signup page for my project, particularly regarding the following code: <input type="email" id="email" title="invalid email!" runat="server" placeholder="email" /> ...

What are some effective methods for resetting a state in @ngrx/store?

Lately, I've been grappling with a problem that's been on my mind for the past few days. Our team is developing an Angular 2 application, and my task involves creating a wizard for users to complete a form. I've successfully set up the dat ...

Exploring how to read class decorator files in a Node.js environment

I've developed a custom class decorator that extracts permissions for an Angular component. decorator.ts function extractPermissions(obj: { [key: 'read' | 'write' | 'update' | 'delete']: string }[]) { re ...

What is the best way to adjust a component to display varying content based on the scenario?

I am looking for a way to reuse a component on my website that displays messages. The challenge is that in one section, the content consists of only a title and paragraph, while in another section, there are multiple titles and content pieces. I have imple ...

"Track the progress of a form submission with a loading indicator using Sweet

I am looking to incorporate a waiting time animation when submitting a form, and I prefer using SweetAlert over a traditional loading image. Here is the basic code snippet: $("form").submit(function (e) { e.preventDefault(); // prevents def ...

Utilizing trackingjs as an external library in Ionic2

I have been attempting to incorporate the trackingjs library (https://www.npmjs.com/package/tracking) into my ionic2 project. Following the guidelines in the documentation (https://ionicframework.com/docs/v2/resources/third-party-libs/), I was able to suc ...

Choose various widgets

Does anyone know where I can find a widget that resembles a <select multiple="multiple">, with an expanded dropdown featuring a scroll bar, but limited to only selecting one option? ...