Pure CSS Select a menu / drop-down menu: how to make a right arrow function?

Question

I am using a custom select / dropdown menu to solve here: https://stackoverflow.com/a/212829/

This works fine, except that the parameters are only displayed if you click on this field. Clicking on the "arrow" on the right does not display the drop-down list options. What is the 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; } 

Answer 1

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

 pointer-events:none; 

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

Edit: just in bed and maybe think about a different solution, but can't check on my phone, but maybe the jQuery mousedown trigger might be an option to hide the arrow for a split second for a moment before the click, maybe?

Or this, not sure how it will be used, but saw it in another thread: $ ('# Select-identifier') show () focus () press (); ...

If I were on my computer, I would test it ...

Answer 2

It's good. Thanks for the information. How to use content. I do not have Android, but from what I see on Mac on FF, Saf and Chrome, it works very well. Try adding:

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

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