Change select arrow when trigger event click

Well, 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 a 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 did not work.

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

Actually it worked, but you have to click on the button and not just move the mouse over it for the select to open.

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