title: Change background color of clicked option in duallistbox
body: <p>Im using <a href="http://www.virtuosoft.eu/code/bootstrap-duallistbox/" rel="nofollow noreferrer">bootstrap-duallistbox</a></p>
  <p>Currently, when users click an option from either box, the option background turns blue for a second then the option is moved to the other select box.</p>
  <p><a href="https://i.stack.imgur.com/5rJVn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5rJVn.png" alt="enter image description here" /></a></p>
  <p>I would like to change the color from blue to something else.</p>
  <p>What state is this exactly? CSS applied to <code>option:active</code>, <code>option:hover</code>, <code>option:focus</code> do not work to select this state and change the color.</p>
  <p>I thought this might work, but it also failed.</p>
  <pre><code>select:-internal-list-box option:checked {
      color: #333 !important;
      background-color: #FFC894 !important;
  }
  </code></pre>
  <p>Nor did:</p>
  <pre><code>select:-internal-list-box option:selected  {
      color: #333 !important;
      background-color: #FFC894 !important;
  }
  
  select:-internal-list-box:focus  option:checked  {
      color: #333 !important;
      background-color: #FFC894 !important;
  }
  
  select:-internal-list-box:focus  option:selected  {
      color: #333 !important;
      background-color: #FFC894 !important;
  }
  
  select:-internal-list-box:focus option::selection  {
      color: #333 !important;
      background-color: #FFC894 !important;
  }
  
  .bootstrap-duallistbox-container:focus select option::selection {
      background: #ffb7b7 !important;
  }
  </code></pre>
  <p><strong>How can I change the background color displayed when an option is clicked?</strong></p>
  <h3>Here is a <a href="http://jsfiddle.net/rgy8deb9/2/" rel="nofollow noreferrer">jsFiddle</a> showing the issue</h3>