Change select arrow when triggering event click

Question

Good, I have the select below:

<div class="selectOptions">
  <select name="select" id="select">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
</div>

And the CSS below that adiciona one seta para baixo as background of div selectOptions and encobre the original arrow of select

@charset "utf-8";
/* CSS Document */

.selectOptions {
    width: 240px;
    height: 34px;
    overflow: hidden;
    background: url(../_imgs/setaBaixo.jpg) no-repeat right #ddd;
    border: 1px solid #ccc;
}
.selectOptions select {
    display: block !important;
    background: transparent;
    width: 268px;
    padding: 5px;
    font-size: 16px;
    line-height: 1;
    border: 0;
    border-radius: 0;
    height: 34px;
    -webkit-appearance: none;
}

I tried to add the code below but it didn’t work.

.selectOptions:hover {  
    background: url(../_imgs/setaCima.jpg) no-repeat right #ddd;
}

It actually worked, yes, but you need to click the button and not just hover the mouse over it to open the select.

Any idea of how to swap the select arrow when it opens? That is, only during the opening time and then returns naturally to setaBaixo.jpg