How to make a div layer ignore user clicks, and allow the click to pass to the div/select below?

Question

enter image description here

I have a custom styled select here with a svg dropdown arrow on top of it. However if you try to click on the arrow itself it does not open the select because of some sort of layered hierarchy. Is there anyway to disable that div from being clickable with just CSS?

<h2>
    <div class="drop_arrow"></div>
    <select id="getRoute">
        <option class="routeSelector">Onboarding</option>
        <option class="routeSelector">Engagement</option>
        <option class="routeSelector">Popular Searches</option>
        <option class="routeSelector">Unregistered</option>
    </select>
</h2>

#getRoute {
    margin-right: 5px;
    margin-left: -20px;
    padding: 5px;
    width: 180px;
    font: 16px LatoBold;
    -webkit-appearance: none;
}

.drop_arrow {
    position: relative;
    float: left;
    top: 10px;
    left: 150px;
    width: 18px;
    height: 12px;
    background-position: -520px 0px;
    background-size: 1600px 1600px;
    background-image: url(http://leongaban.com/images/dash.svg), none;
-moz-user-select: none; 
    -khtml-user-select: none; 
    -webkit-user-select: none; 
    -o-user-select: none; 
}

I was trying to find some transparency type style, not sure I deserve a -1 on this one :/ — Leon Gaban, May 19 '14 at 22:43
i didnt downvote it, i actually think its a valid question, i am looking into it now. — Pogrindis, May 19 '14 at 22:45
Sorry yeah that part wasn't direct at you :) (just made my title a bit more specific incase that was it) — Leon Gaban, May 19 '14 at 22:46

score 2 · Answer 1 · answered May 19 '14 at 22:50

2

I believe i have found a solution.

adding the JS:

function dropDown(){
  var dropdown = document.getElementById('getRoute');
    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    dropdown.dispatchEvent(event);
}

and triggering this on the arrow click should do the trick .

http://codepen.io/anon/pen/xiDmw

answered May 19 '14 at 22:50

Pogrindis

7,755
5
31
44

Oh sweet thanks! I thought there was a simple CSS trick, but yeah going with JS in the end :) – Leon Gaban May 19 '14 at 22:52
Ah @gilly3 found the CSS answer, but +1 still man for the help and research :) – Leon Gaban May 19 '14 at 23:14

score 2 · Accepted Answer · answered May 19 '14 at 23:07

2

Give the drop down list relative position (so that it is above the arrow in the stack order), and a transparent background (so the arrow is visible through the drop down):

#getRoute {
    ...
    background-color: transparent;
    position: relative;
}

http://codepen.io/anon/pen/bcjgJ

answered May 19 '14 at 23:07

gilly3

87,962
25
144
176

Ah! That was what I was looking for :D I knew CSS could do it! thanks – Leon Gaban May 19 '14 at 23:11

score 1 · Answer 3 · answered May 19 '14 at 22:37

1

css is for display not for click events.

You need to use js to forward the click to the element you want

answered May 19 '14 at 22:37

Zied Hamdi

2,400
1
25
40

Good point, this just seems like too simple a solution to actually need JS for. – Leon Gaban May 19 '14 at 22:47
Ok right! sorry, I didn't try the code to understand what is wanted – Zied Hamdi May 19 '14 at 23:56

How to make a div layer ignore user clicks, and allow the click to pass to the div/select below?

3 Answers3