Pure CSS Select Menu/Dropdown: How to make right arrow function?

Question

I am using a custom select/dropdown menu per the solution here: https://stackoverflow.com/a/10190884/1318135

This functions great, except that the options only display if you click on the box. Clicking on the 'arrow' on the right does not bring up the dropdown options. What's a workaround?

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;
    }

Solution 1

Depending on your client base, One very simple bit of code:

pointer-events:none;

See the browser support here: http://caniuse.com/pointer-events

Edit: just in bed and possibly thought of another solution but can't test on my phone, but maybe the jQuery mousedown trigger could be an option, to momentarily hide the arrow a split second before the click, maybe?

Or this, not sure how it'd be used, but saw it in another thread: $('#select-id').show().focus().click();

If I was at my pc I'd test it...

Solution 2

That's nice. Thanks for the info. Like the use of content. Don't have an Android but from what I'm seeing in Mac on FF, Saf, and Chrome it works pretty good. May try adding:

-moz-border-radius: 0px 20px 20px 0px;
-webkit-border-radius: 0px 20px 20px 0px;
border-radius: 0px 20px 20px 0px;`=

to it to .custom-select:after to align the borders.

Comments

[Danield]

@AlexanderWigmore is there any workaround for internet explorer (doesn't work even in ie10)