The dropdown arrow icon fails to display downward direction when double-clicked

I'm working on a select dropdown that resembles a material UI dropdown. I've added icons for an arrow up and arrow down to indicate the state of the dropdown. The aim is to show the arrow up when the dropdown is open and switch to the arrow down icon when it's closed. Currently, clicking on the dropdown displays the arrow up, but if you click again and the dropdown isn't visible, I want the arrow down functionality. How can this be achieved?

<select className="Select">
        <option value="">Select</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
      </select>

CSS Code

.Select {
  font-size: 1.5rem;
  width: 10rem;
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: 2px solid blue;
  padding-bottom: 2px;
  color: var(--deepGray);
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>')
    no-repeat right;
  -webkit-appearance: none;
}
.Select:hover {
  color: blue;
  background: white;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>')
    no-repeat right;
}
.Select:focus {
  outline: none;
  box-shadow: none;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-up" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/></svg>')
    no-repeat right; 
  background-position: right;
}

In cases where the dropdown is not present, the arrow down should be displayed https://i.sstatic.net/OXE8r.png

javascripthtmlcssreactjs

Answer №1

Regrettably, achieving this without utilizing JavaScript is not feasible. The MDN documentation highlights the challenges in customizing the <select> element:

The <select> element is notoriously difficult to style effectively with CSS.

The structure of the <select> element is intricate and hard to manage. For complete control, it is recommended to explore using a library that offers extensive options for styling form elements or creating a custom dropdown menu using non-semantic elements, JavaScript, and WAI-ARIA for semantic value.

If JavaScript is utilized, there are various options available:

  1. Develop custom components using keypress events
  2. Develop custom components using jQuery
  3. Utilize a React form library

Answer №2

The issue lies with the :focus in your case:

When you first click, the focus is set and the list opens. However, if you don't click anywhere else after selecting an option, the focus will remain on the select element, keeping the :focus active. The state of the list is not affected by this.

=> To remove the focus from the select element, simply click outside of it to revert back to the correct "arrow down" symbol.

One way to remove the focus is by using:

javascript:document.activeElement.blur();

But you'll need to find the right trigger event for this action.

Since CSS doesn't provide a way to differentiate between the states "select list open / closed", you may need to use JavaScript to check the state of the select object or its options to achieve your desired effect.

Consider reconsidering your requirements, as introducing unnecessary JavaScript code may not be essential for the functionality you're looking for.

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

Tags for classes are not appearing or being activated on my website

I recently purchased a template from casethemes () and I am experiencing an issue. Despite using the same tags as their demo site, the classes are not being executed properly and appear broken on my website. Could it be that I am missing some necessary lib ...

htmlcsswebbootstrap-4themes

Challenge encountered with asynchronous angular queries

Dealing with asynchronous calls in Angular can be tricky. One common issue is getting an array as undefined due to the asynchronous nature of the calls. How can this be solved? private fetchData(id){ var array = []; this.httpClient.get('someUrl ...

javascriptangulartypescriptrxjs5

What is the best way to navigate to a different route using the <Redirect> component in the componentDidMount

I want to automatically redirect a user to the /login page if they are not authenticated. To achieve this, I am checking the user's authentication status in the componentDidMount() method and if they are not authenticated, I am redirecting them to th ...

reactjs

Setting a single value for several identifiers within a JSON object

I'm new to JSON and I'm curious if it's possible to have a name/value pair with multiple names. Essentially, I want to be able to search for either name and retrieve the same value without having to update the value in two different places. ...

javascriptjson

"Encountering issues while upgrading Polymer project version from 0.5 to 1.0

I am in the process of upgrading my project from polymer .5 to polymer 1.0. After installing the new version of the polymer library, iron element, and paper element, I encountered the following error: polymer-micro.html:63 Uncaught TypeError: prototype ...

javascripthtmlvisual-studio-2012polymernuget-package

Ways to convert a jQuery object into HTML that can be utilized?

When running the code below, an alert message of "object Object" is displayed: var shipImgs = $("#div").children(); alert(shipImgs); The container with id "div" includes a total of 4 children (image tags). <div id="div"> <img src="/imgs/spa ...

javascriptjquery

Trouble updating React Context state when attempting to utilize token from cookies

From my understanding, the typical method of maintaining context state in a React web application involves storing the user's information in a token within local storage or a cookie. Upon each page load, this token is retrieved to reset the context st ...

reactjstypescriptcookiesreact-hooksreact-context

The loading time for the Docker index HTML file page is unacceptably slow

Sample Dockerfile: FROM ubuntu:22.04 RUN apt-get update RUN apt-get install -y nginx COPY -r dist/ /var/www/html/ CMD service nginx start && tail -F /var/log/nginx/error.log After that, run the following commands: docker build -t website . docker ...

htmlangulardockernginxstatic-files

Unique Input Values in Forms

I'm encountering an issue with a basic HTML form connected to a PHP script for processing values. Despite thorough testing, the form is not functioning correctly. Upon inspecting the form markup, I discovered: <form id="delete_item_3_form" action ...

javascriptphpjqueryformspost

Enhance the connectivity between flex items in Bootstrap by incorporating joining lines

I'm currently developing a "tree" using bootstrap 5, a list of items that can be navigated down into. I'm implementing this using bootstrap 5 and raw HTML. Here is the HTML structure I have set up: https://i.sstatic.net/j84vp.png However, I wo ...

htmlcssbootstrap-5

What caused the sudden malfunction in the extended Express Request?

Currently, I am utilizing Node v12 along with Express v4.16.4 and Typescript version 3.8.3 within VSCode. This particular snippet of code has remained unchanged for almost 8 months and is utilized in all our routers. export interface ICustomRequest exten ...

javascriptnode.jsexpress

Is there a way to modify the text color of table TD using Javascript?

I have experience with HTML/CSS, for example I can make text turn red using the code <table><tr><td style="color:#f00;">text</td>. However, I am struggling with JavaScript. When I try to change the color of a table cell u ...

javascripthtml-table

Having trouble setting up React js dependencies with npm install in a GitHub repository project

I recently downloaded a project from GitHub that contains the Recoil function. However, when I attempt to run npm install, I encounter some issues: After trying npm install --legacy-peer-deps, I was faced with: 61 vulnerabilities (4 low, 5 moderate, 39 hi ...

reactjsnpmnpm-installnpm-startrecoiljs

Pass the radio button value and accompanying text to a PHP script

I am struggling with sending both the radio button value and text to php. Currently, I can only send the radio button value. However, I want to also include the text after the radio button without altering the checkbox information. <input name="li ...

phphtml

Discovering escape characters while iterating through a string in javascript

I have a situation where I must rearrange a string into an array for a unique user display. Whenever encountering an escape character (such as \n for a new line), it needs to be added as a separate item in the array. For example, if the string is: sa ...

javascriptarraysstringhtml-escape-characters

The deployment on openshift encountered an error while trying to execute the start script, displaying the message: "ng: command

Upon deploying my app on OpenShift, I encountered the following error within the container: The status of the container is "Crash Loop Back-off." In the local environment, everything works fine with no errors. I double-checked that the Angular package v ...

javascriptnode.jsangularopenshift

Complicated JSON configuration paired with Dojo dropdown menus

I have a data structure that I'm struggling to manage efficiently. To tackle this issue, I've decided to leverage Dojo and utilize JSON. You can find the specific structure I'm referring to at the end of this message, so please take a look b ...

javascriptjsonselectdojo

The Action Creator is not being waited for

In my application, I am using a placeholder JSON API to fetch posts and their corresponding users. However, I encountered an issue where the user IDs were being duplicated and fetched multiple times. To resolve this, I implemented the following code snippe ...

javascriptreactjsreduxreact-reduxredux-thunk

Attach onClick event when employing a higher order component

Just getting started with React and I have a question. After following some blog posts, I was able to create a page using higher order components and componentDidMount to fetch data from an API and display it. Everything works smoothly and the code looks ...

javascriptreactjshigher-order-components

Unable to create circular dots within the Slick Slider widget

While attempting to create a slider with dots, I encountered an issue where the dots appeared as ellipses instead of circles, despite setting the width and height to be the same. For instance, I specified width: 12px; height: 12px; but it resulted in a sha ...

htmlcss