CODEWITHSUNDEEP
javascripthtmlcss
Ashik
Ashik

Reputation: 3448

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

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?

Upvotes: 0

Views: 395

Answers (1)

Victor Fernandes
Victor Fernandes

Reputation: 396

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>

Upvotes: 2

Related Questions