Dropdown Arrow icon is not showing Downside when double click on it

Question

I am creating a select dropdown like a material UI dropdown, there I have added an appearance like an arrow up and arrow down icon, so I need that the arrow up only happens when the dropdown is shown otherwise the arrow down icon. If I am clicking on the dropdown, the arrow up is coming, but again if you click then the dropdown is not present, at that time I need the functionality of the arrow down. How can I make this happen?

<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 that time i need arrow down

score 1 · Answer 1 · answered Mar 23 '23 at 14:17

Unfortunately it's not possible to do this without JavaScript. The MDN docmentation makes note of how difficult the <select> element is to customise:

The element is notoriously difficult to style productively with CSS.

The element's internal structure is complex, and hard to control. If you want to get full control, you should consider using a library with good facilities for styling form widgets, or try rolling your own dropdown menu using non-semantic elements, JavaScript, and WAI-ARIA to provide semantics.

If you use JavaScript to do this you have lots of options:

Create your own custom components using keypress events
Create your own custom components using jQuery
Use a React form library

score 0 · Answer 2 · answered Mar 23 '23 at 15:29

Your problem is the :focus:

With the first click you set the focus (and also open the list). But as long as you do not click elsewhere than the select element, the focus remains and the :focus is true. The state of the list has no dependency on this.

=> Click anywhere else than the select element and the focus is gone away form the select element, switching back to the correct "arrow down" symbol.

One possibility to just kick the focus is

javascript:document.activeElement.blur();

but you still have to get the right trigger event.

As I cannot see a possibility by CSS to distinguish the state "select list open / closed", you probably have to check by javascript the state of the select object or its option items to realize your effect.

perhaps you think about your wish, as here you invent the need for javascript code, where not really required for functionality.

Dropdown Arrow icon is not showing Downside when double click on it

2 Answers2