javascript: how can I replace the select:after icon on click?

Question

this is my icon style.

.select::after {
    /* content           : "▼"; */
    content: '▲';
    position          : absolute;
    top               : 0;
    right             : 0;
    padding           : 0 1em;
    background        : #e100ff;
    color             : #fff;
    cursor            : pointer;
    pointer-events    : none;
    -webkit-transition: 0.25s all ease;
    -o-transition     : 0.25s all ease;
    transition        : 0.25s all ease;
}

what I want is to replace the icon, when the icon is clicked. how can I achieve that?

change the class of the DOM when click and do other `:after` to the new class with your wanted style — לבני מלכה, Jun 06 '21 at 07:34
Does this answer your question? [Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)](https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin) — לבני מלכה, Jun 06 '21 at 08:11

score 2 · Answer 1 · answered Jun 06 '21 at 07:59

You would need to use some JS here too to update the class. Here's a common approach. Toggle an active class and based on that you can update the icon.

document.querySelector('.select').addEventListener('click', function (e) {
    e.target.classList.toggle('active')
}, false)

.select::after {
    /* content           : "▼"; */
    content: '▲';
    position          : absolute;
    top               : 0;
    right             : 0;
    padding           : 0 1em;
    background        : #e100ff;
    color             : #fff;
    cursor            : pointer;
    pointer-events    : none;
    -webkit-transition: 0.25s all ease;
    -o-transition     : 0.25s all ease;
    transition        : 0.25s all ease;
}
.select.active::after {
  content: '▼';
}

<span href="" class="select">Pop</span>

in my case, when the dropdown menu is opened, the click event is not trigered. it triggered when the dropdown is closed. — Ashik, Jun 06 '21 at 09:41
maybe you have a stopPropagation in another eventHandler in the propagation chain while opening. — Victor Fernandes, Jun 06 '21 at 12:03

javascript: how can I replace the select:after icon on click?

1 Answers1