javascript：如何替换 select：单击后的图标？

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?

Answer 1

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>