Rotate the mat-select arrow when the dropdown opens (moving in both upward and downward directions)

Currently, I have a mat-select dropdown icon arrow that toggles facing up or down based on user clicks. However, after selecting an option and closing the dropdown, the arrow remains in the upward position unless further clicked and held. I have attempted using :focus to manage this transformation, but have yet to find a successful solution.

The dropdown component I am utilizing can be found here: https://material.angular.io/components/select/overview (without the 'mat-form-field' in Angular 8)

Below is the SCSS code snippet:

::ng-deep .mat-select-arrow {
  border-left: 15px solid transparent !important;
  border-right: none !important;
  border-top: 15px solid transparent !important;
  background-image: url(../../assets/icons/Icon_dropdown_Arrow_bottom.svg) !important;
  background-repeat: no-repeat !important;

  -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
}

:focus {
  &::ng-deep .mat-select-arrow {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
  }
}

Although this code successfully switches the arrow from downward to upwards upon click, it fails to revert back to its original position when an option is chosen. Can anyone provide guidance on how to reset the arrow's orientation once an option has been selected?

I have also experimented with the use of mat-select-option/mat-option to reverse the arrow rotation upon selection, but have not achieved the desired result.

Answer №1

Have you attempted utilizing the :checked pseudo-class to return it to its original state? Perhaps you could experiment with something similar to your ':focus':

:checked {
  &::ng-deep .mat-select-arrow {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
  }
}

For more information on the :checked pseudo-selector, you can visit this link.

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

Tips for reliably resizing slider images with varying widths

I am trying to scale '.slick-slide img' by height because the images vary in width. Scaling them by width would result in inconsistent proportions. However, when I apply a dimension to the height property for '.slick-slide img', the ima ...

Is there an issue with validation when using looped radio buttons with default values in data-driven forms?

Within my reactive form, I am iterating over some data and attempting to pre-set default values for radio buttons. While the default values are being successfully set, the validation is not functioning as expected. <fieldset *ngIf="question.radioB ...

Unable to execute JavaScript function by clicking

I've tried everything, but I can't seem to change the button text when selecting an item in the "Requirements" dropdown. You can view the issue on this site. Located at the bottom of the page is the "Requirements" dropdown. Each item has an oncl ...

Guide to creating two-way data binding using ngModel for custom input elements like radio buttons

I am currently facing an issue with implementing a custom radio button element in Angular. Below is the code snippet for the markup I want to make functional within the parent component: <form> <my-radio [(ngModel)]="radioBoundProperty" value= ...

AngularJS version 1.5.11 experiencing issues with ng-repeat functionality

Having an application built on angularJS v1.5.11, I encountered a major issue while attempting to use ng-repeat in a table format like below: <tbody> <tr ng-repeat="score in data.result"> <td ng-repeat="item in score"> {{ item }} & ...

Issues with Jquery Cycle not functioning as expected

I've been delving into the world of Jquery, attempting to create a basic SlideShow, but unfortunately, the desired effect isn't happening... Here's the layout of my HTML file: <!doctype html> <html lang="en"> <head> ...

Converting a string representing time to a date object in Angular

Converting a string representation of time to a Date object var timeString = "09:56 AM"; this.audit_time = new Date(timeString); // Error: Invalid date I'm facing an issue with this conversion. Any suggestions on how to correct it? Please help me s ...

Set a variable in PHP by passing a value

In continuation of my previous post, I realized I missed a point and needed to start a new thread. Thankfully, I found a solution for the issue in my previous post and here is the final code: Scrapping code not working in php <?php $html = file_get_co ...

What is the best way to ensure the correct resolution order of several promises?

Exploring the realm of modern JS and diving into ECMAScript 6 Promises. Experimenting with a simple test: let slow = new Promise((resolve) => { setTimeout(function() { console.log('slow'); resolve(); }, 2000, 'slow'); }); ...

Node.Js made user authentication effortless

Struggling to integrate user authentication using Passport, Express, and Node.Js as tutorials mostly focus on MongoDB. However, I prefer Neo4J for my database. The examples on passport-local don't fit my needs since I've already implemented a loc ...

What could be causing the function to not work properly within the React component?

Having trouble with a React component utilizing speech recognition for converting speech to text. Initialized the recognition functions within the component but encountering errors. Need assistance in troubleshooting this issue. const speechRecognition = w ...

How to rename a class of an image tag using jQuery

I need to update the class name in my image tag <img src="img/nex2.jpeg" class="name"> When hovering over with jquery, I want to add a new class to it. After hovering, the tag should appear as follows: <img src="img/nex2.jpeg" class="name seco ...

What is the process for sending a request and obtaining a response from a REST API using JavaScript?

I have a private server set up on my computer with a built-in REST API. The base URL for the API is: . I am now looking to develop a client application for this server using the API. To authenticate on the server, the API endpoint is baseurl/login with the ...

What is the process for designing custom width columns using Bootstrap?

I am working on a table with three columns that is styled using the Bootstrap class "table table-striped". However, I need the first column to be 100px in width, the second column to be 400px, and the third column to be 200px. How can I achieve this cust ...

Prevent excessive clicking on a div element

I am facing a simple issue that I haven't been able to resolve yet. I want to prevent multiple clicks on a button before an AJAX call is complete. This is what I have tried so far: <button id="btn_pay"></button> $("#btn_pay").click( fun ...

Interactive CSS Video Gallery Slideshow

Is there a way to create a slideshow video gallery using CSS? I've looked everywhere but all I find are slideshow image galleries. If anyone has any resources or tips on how to do this, please share! This is the kind of video gallery I'm looking ...

What is the process of encoding JSON in PHP using jQuery Ajax to send post data?

I created an HTML form to submit data to a PHP file upon hitting the submit button. $.ajax({ url: "text.php", type: "POST", data: { amount: amount, firstName: firstName, lastName: lastName, email: email }, ...

MUI: The fontFamily property is not able to be overridden by nesting within the

My goal is to have different fonts for different parts of my application using theme nesting. Unfortunately, I discovered that theme nesting doesn't work when it comes to overriding fonts. In my App.js file: import React from "react"; impor ...

jQuery: Track mouse movement with a delay

I'm looking to create a div that follows cursor movement with a slight delay, similar to the effect seen on this website: In the example link provided, you can observe that the 'follower' has a brief delay in its animation. I attempted to ...

Learn how to alter the website's overall appearance by changing the background or text color with a simple click on a color using Angular

Is there a way to dynamically change the background color or text color of the entire website when a user clicks on a color from one component to another? I know I need to use the Output decorator, but how can I implement this? style.component.html <di ...