Adjusting the dropdown select icon's color on hover in Material UI

I am currently working on a project using React.js and Material UI. My goal is to modify the color of the dropdown select icon when it is hovered over. However, I specifically want the color change to apply only to the icon itself and not the entire select component.

Here is the code snippet that is currently in use:

import ExpandMore from "@mui/icons-material/ExpandMore";

<Select
              className="selectField"
              variant="standard"
              fullWidth
              IconComponent={ExpandMore}
/>

I have attempted to utilize the &:hover attribute but found that it alters the color of the entire select box rather than just the icon.

Another strategy I tried was adjusting the z-index of the icon using inspect element, but this did not produce the desired result either.

Lastly, I experimented with passing the color change as a prop. Unfortunately, this approach caused the select icon to lose its functionality and become unclickable.

//tsx file
IconComponent={(iconProps) => (
                <ExpandMore {...iconProps} className="MuiSelect-icon" />
              )}
//CSS file
  .MuiSelect-icon {
    color: #121212 !important;
    // pointer-events: visiblePainted;
    &:hover {
      color: #0645c5;
    }
  }

Answer №1

To customize the color of the dropdown select icon when hovering using CSS alone, you can utilize the ::after or ::before pseudo-elements to style the dropdown icon.

.selectField-box {
    position: relative;
    display: inline-block;
}

.selectField {
    appearance: none; /* Remove default arrow */
    background: none;
    padding: 10px 40px 10px 10px; /* Create space for the icon */
    border: 1px solid #ccc;
    cursor: pointer;
}

.selectField-box::after {
    content: '▼'; /* Custom dropdown arrow */
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #000; /* Default color of the arrow */
}

.selectField-box:hover::after {
    color: #007bff; /* Adjust color of arrow on hover */
}

Implement the dropdown within this structure

<div class="selectField-box">
<!-- code here -->
</div>

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

applying hover effect to text within a table

After investing some time into solving this issue, I am still struggling to find a solution. Essentially, what I want is for the :hover pseudo-class to trigger the border-bottom effect only when I hover over the text in a table. Currently, the :hover pseu ...

Is it possible to alter CSS based on the width of the webpage using javascript

We are currently developing a web application that will be deployed on various devices such as mobile phones, iPads, iPhones, and Android. Instead of using user agents to show different views, I prefer having CSS that adjusts based on the screen width. We ...

Enhancing Mocha and Chai tests: Exploring ways to increase strictness

While working with Mocha and Chai, I have come across numerous unreliable tests. I want all of these tests to fail. Similar issues on StackOverflow are often due to async problems and not using done(). Regardless, even if that were my problem, I would stil ...

Render doesn't wait for the componentWillMount lifecycle method

I'm currently working on implementing a redirection to the home page for logged-in users. I'm using ping to fetch login information, setting a state based on the response, and then checking that state in the render method for redirection. However ...

What is the best way to generate bootstrap rows from this code in React JS?

In my current array of objects, I have twelve items: { data:[ { type:"tweets", id:"1", attributes:{ user_name:"AKyleAlex", tweet:"<a href="https://twitter.com/Javi" target="_blank"> ...

Is the Bootstrap navigation bar collapse button visible on larger screens?

How can I make my Bootstrap navbar collapse button work on big screens the same way it does on mobile devices? <nav class="navbar navbar-expand-md navbar-light bg-light"> <a class="navbar-brand" href="#">Default</a> <button ...

Error in React UseTable: Attempting to read properties of an undefined object (specifically trying to use a forEach loop)

https://i.stack.imgur.com/ZSLSN.pngHaving an issue here that I need some quick help with! Whenever I attempt to render data into a React table, I encounter the error mentioned above. The data is fetched from an API using Axios. Let's take a look at t ...

CSS style takes precedence over inline JavaScript transitions occurring from a negative position

I am puzzled by a JavaScript fiddle I created which contains two small boxes inside a larger box. Upon clicking either of the buttons labeled "Run B" or "Run C", the corresponding box undergoes a CSS transition that is controlled by JavaScript. Below is t ...

Retrieve the original state of a ReactJs button from the database

I am completely new to ReactJs and I have a question regarding how to set the initial state of a button component based on data from an SQL database. I am successfully retrieving the data using PHP and JSON, but I am struggling with setting the state corre ...

How to create a dynamic button in React.js with custom styling from Ant Design's Button component

Hi there, my goal is to have a button display a loading state when it is clicked. The challenge I am facing is that the buttons are generated dynamically and styled with antd. Here's a snippet of my code: <Button loadi ...

Unable to complete npm install as it encountered an unexpected issue with JSON parsing, resulting in the

0 info it was successful if it ends with okay 1 verbose cli [ 1 verbose cli 'C:\\Program Files\\nodejs\\node.exe', 1 verbose cli 'C:\\Program Files\\nodejs\\node_modules\&b ...

Managing cookies with ReactJs: A guide to setting, storing, and updating cookies without deleting the existing ones

How can I create a cookie that stores input values when the user submits a form, and updates the cookie without removing previously saved data on subsequent submissions? export default function saveToCookie() { const [ name, setName ] = useState('&a ...

Issue with displaying Bootstrap 3 dropdown menus

I've been experimenting with the latest Bootstrap 3 and everything seems to be working well, except for the dropdowns I'm trying to create. Please let me know if anyone has any insights into what I might be doing incorrectly. Here is the code I&a ...

Whenever the useState hook is utilized, it will trigger a re-execution

In my code for form validation in the next.js V1, I am experiencing a problem. The code snippet is as follows: setErrorF((errorF) => { if( errorF.FNameAndLName !== "" || errorF.phoneNumber !== "" || errorF.location1 !== ...

"Unlocking the Potential of ReactJS: A Guide to Setting Focus on Components Once They Become

My code had a <div> with a child component named SocialPostwithCSS, and when onClick was triggered, it would hide the div, set the state to editing: true, and display a <textarea>. I used this.textarea.focus with a ref={(input)=>{this.textar ...

The webpack-dev-server successfully displays the entire application with correct routing, however the routing does not function when accessed on localhost

I've been working on developing a basic React application for a company, using webpack-dev-server for hotswapping to speed up the development process. The app runs smoothly on webpack-dev-server, with routing functioning as expected in production. How ...

Navigating between divs with a 100% height using up and down movements

I am working on a website that is structured into different sections using divs with shared classes but unique IDs. Each div is set to take up 100% of the viewport height. To navigate between these sections, I want to provide Up/Down arrow buttons for user ...

React Material-UI Multiple Select with Checkboxes not displaying initial selections as checked

I am fairly new to working with React and MUI, so please bear with me. Currently, I am in the process of learning how to create Multiple Select Options with checkboxes by populating the Dropdown Options from an Array. Although I have set up the initial/de ...

Animation using CSS keyframes for simultaneous manipulation of various properties

I am facing a challenge with animating both the bottom and left properties of an object inside a container div simultaneously. How can I make it move diagonally? Despite using keyframes, the following code does not seem to achieve this effect: #containe ...

Warning: Shadcn-UI Form Alert - An element is converting an uncontrolled input to controlled mode

Throughout the course of this project, I found myself repeatedly using const [fileNames, setFileNames] = useState<string[]>([]); and logging the state with console.log(fileNames). However, every time I clicked on the parent element, an empty Array e ...