How to fix a dropdown up and down arrow CSS issue?

Question

In my application dropdown, arrow up and down not working properly. I have tried but I do not know how to fix this issue.
If I click the dropdown, arrow should be up. Again if I click the dropdown, arrow should be down.

.label::after {
    background-color: white;
    border-right: 3px solid black;
    border-bottom: 3px solid black;
    width: 10px;
    display: inline-block;
    height: 10px;
    transform: rotate(45deg);
    -webkit-transform: scale(1) rotate(45deg) translate(0px, 0px);
    -moz-transform: rotate(45deg) scale(1);
    -o-transform: rotate(45deg) scale(1);
    margin-top: 10px;
    content: '';
    margin-left: 5px;
} 

.label::after {
    border-right: 3px solid black;
    border-bottom: 3px solid black;
    transform: rotate(-135deg);
    -webkit-transform: scale(1) rotate(-135deg) translate(0px, 0px);
    -moz-transform: rotate(-135deg) scale(1);
    -o-transform: rotate(-135deg) scale(1);
}

<i class="label"></i>

Demo:

There is no checkbox input related to the dropdown arrow, `input[type='checkbox']:checked ~ .label::after` is never going to be applied. (And, since it's inside a button, it would be invalid to include that input anyway) — DBS, Aug 03 '23 at 10:58
@DBS: Edited my code. I do not know how to do it. So, Can you edit my stackblitz? — EMahan K, Aug 03 '23 at 11:14
Is JavaScript solution acceptable or you want only CSS solution? — Md. Rakibul Islam, Aug 03 '23 at 12:35

Md. Rakibul Islam · Accepted Answer · 2023-08-03T16:30:38.483

2

I used the state which was used to open and close the dropdown and applied it to the label and it works perfectly. I don't think only CSS is capable of handling that state.

Edit: The alignment issue is also fixed. Here is the Stackblitz Link.

/* Changes in CSS */

button.drop-toggle .label::after {
  transform: rotate(-135deg);  
}

button.drop-toggle .label-initial::after {
  transform: rotate(45deg);
  position: relative;
  top: -5px;
}

button.drop-toggle{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<!-- Changes in multi-select-dropdown-component.html -->

<i class="label" *ngIf="showDropDown"></i>
<i class="label label-initial" *ngIf="!showDropDown"></i>

For Checkmark color change:

.drop-show input[type='checkbox']{
  accent-color: red;
}

edited Aug 03 '23 at 16:30

answered Aug 03 '23 at 13:54

Md. Rakibul Islam

2,140
1
7
14

1

Hi @Md. Rakibul Islam, good solution. I was thinking about something similar at first, but I wanted to find a solution that didn't require any HTML interference and there is a CSS selector :has() which I used in my answer as well. – Gandalf the Gay Aug 03 '23 at 14:26
Arrow not aligned properly. Up and Down arrow it should be in the same place. Can you check it? – EMahan K Aug 03 '23 at 14:44
I mentioned this in my answer - the issue cause the top and left margin in Your arrow. – Gandalf the Gay Aug 03 '23 at 14:54
@EMahanK I fixed it too. It is updated in the answer and in the Stackblitz link. – Md. Rakibul Islam Aug 03 '23 at 14:58
Small help. Can you change checkbox background(Checkmark) color? – EMahan K Aug 03 '23 at 15:48
Yes. I updated it in the answer and in the Stackblitz link. – Md. Rakibul Islam Aug 03 '23 at 16:31
Sometimes not working bcoz using like this: – EMahan K Aug 11 '23 at 06:51
Can you use any other method instead of *ngIf="!showDropDown" ? – EMahan K Aug 11 '23 at 06:52

Gandalf the Gay · Answer 2 · 2023-08-03T16:16:22.893

1

Hi,

if I correct understood Your problem is position of this arrow.

Answer edited after the question edit.

Solution

In this case a CSS selector :has() can be helpful. We need to apply another styles (arrow rotation) when the dropdown is showed and you add it via JS, so we check when the dropdown container has the options.

app-multi-select-dropdown:has(.drop-show) .label::after {
    transform: rotate(180deg);
}

I would also delete the top and left margin setting in .label[_ngcontent-c2]::after to avoid false rotating.

Knowledge

You can read more about :has() selector e.g. here.

Now quickly I didn't go into the details of why, maybe it's related to the browser version, but for me this solution works on Google Chrome and on Mozilla Firefox not.

Cheers

edited Aug 03 '23 at 16:16

answered Aug 03 '23 at 11:11

Gandalf the Gay

384
1
13

Edited my question. Please edit my stackblitz. – EMahan K Aug 03 '23 at 11:33
You have any idea? – EMahan K Aug 03 '23 at 12:29
Hi @EMahanK, rather I won't edit your code direct. I try to help You with my answer and You can check it by yourself if that works. I came with one idea, I edited the answer. It's important to note that I struggled with a browser issue - this didn't work for me in Mozilla Firefox, but it did in Google Chrome. It may be that this problem only happened to me, but I haven't yet checked why exactly it occured. I wanted to deliver you the answer first. – Gandalf the Gay Aug 03 '23 at 14:21
1

Wow! You really found a good one. I also wasted a lot of time with :has() pseudo selector as well but didn't notice `.drop-show` class at that time. But it should be `app-multi-select-dropdown:has(.drop-show) .label::after` You didn't add the pseudo class `::after` Got to upvote this one (Y) – Md. Rakibul Islam Aug 03 '23 at 15:13

score -1 · Answer 3 · answered Aug 03 '23 at 14:29

To make the dropdown arrow change direction (up or down) when clicked, you can use some JavaScript or jQuery to toggle a CSS class that rotates the arrow accordingly. Here's a step-by-step guide on how to apply this functionality:

1 HTML Structure: Assuming you have an HTML structure like this for your dropdown:

<div class="dropdown">
  <button class="dropdown-toggle" id="dropdownBtn">
    Dropdown
    <span class="arrow"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown options here -->
  </ul>
</div>

** 2 CSS:** Add some CSS to style the dropdown arrow. We'll use a CSS arrow that changes direction when we toggle a class:

.arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-bottom-color: #000;
  margin-left: 5px;
  transition: transform 0.3s ease;
}

.arrow.up {
  transform: rotate(-180deg);
}

3 JavaScript (with jQuery): Next, include jQuery in your project (if you haven't already) and add the following JavaScript code:

<script>
  $(document).ready(function () {
    $("#dropdownBtn").on("click", function () {
      $(".dropdown-menu").slideToggle();
      $(".arrow").toggleClass("up");
    });
  });
</script>

How to fix a dropdown up and down arrow CSS issue?

3 Answers3

Solution

Knowledge