Pur CSS Sélectionnez Menu Déroulant: Comment faire de la flèche droite de la fonction?

Je suis en utilisant un custom select/menu déroulant par la solution ici: https://stackoverflow.com/a/10190884/1318135

Cela fonctionne très bien, sauf que les options qui s'affiche uniquement si vous cliquez sur la boîte. En cliquant sur la "flèche" sur le droit de ne pas afficher les options du menu déroulant. Ce qui est une solution de contournement?

http://jsfiddle.net/XxkSC/553/

HTML:

<label class="custom-select">
 <select>
  <option>Sushi</option>
  <option>Blue cheese with crackers</option>
  <option>Steak</option>
  <option>Other</option>
 </select>

CSS:

label.custom-select {
position: relative;
display: inline-block;

 }

.custom-select select {
    display: inline-block;
    padding: 4px 3px 3px 5px;
    margin: 0;
    font: inherit;
    outline:none; /* remove focus ring from Webkit */
    line-height: 1.2;
    background: #000;
    color:white;
    border:0;
  }




/* Select arrow styling */
.custom-select:after {
    content: "▼";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    font-size: 60%;
    line-height: 30px;
    padding: 0 7px;
    background: #000;
    color: white;
   }

.no-pointer-events .custom-select:after {
    content: none;
    }

OriginalL'auteur user1318135 | 2012-08-02