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 w/ 60% browser support obtained. Anyone have anything that'll work on IE and others as well? — user1318135, Aug 03 '12 at 00:13

Alexander Wigmore · Answer 1 · 2012-08-03T00:32:38.653

6

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...

edited Aug 03 '12 at 00:32

answered Aug 02 '12 at 23:46

Alexander Wigmore

3,157
4
38
60

@AlexanderWigmore is there any workaround for internet explorer (doesn't work even in ie10) – Danield Dec 19 '12 at 20:26

score 1 · Answer 2 · edited Dec 05 '12 at 04:10

1

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.

edited Dec 05 '12 at 04:10

Himanshu

31,810
31
111
133

answered Dec 05 '12 at 03:50

ICW

33
10

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

2 Answers2