How to make a ghost element in CSS?


Tags: javascript,html,css

Problem :

Imagine, There is two elements, A <select></select> tag and I add an arrow-down icon on this select. The problem is that I don't want to simulate a click on the select if the user click on the arrow cause it's too lame...

So I would know if it's possible to make an element visible but allow the user to click on the element behind. As if the element is a ghost, you can pass through it with your cursor.

Thank you in advance.



Solution :

For the visible element, you can set the pointer events to none.

#downarrow{
    pointer-events: none;
}

After that, just place the clickable thing right under it.


    CSS Howto..

    How do I bottom-align bars in a CSS vertical bar chart?

    What is this HTML notation and how can I use it myself?

    Navbar on left of page, how to let content resize to match screen size?

    How to change in all css “#xxx” to “#000” [closed]

    Dilemma in deciding how to create CSS for H1, H2, H3 etc

    How to limit jquery selectable to 1 tr and pass selected items to another page

    How do I apply an image to background using inline CSS?

    How to add css for specific input type text

    CSS how to select first occuring element after another element

    How can I change the numbering of an order list's items?

    How to style the NSString using CSS?

    How to turn off materialize css containers when on mobile?

    How to contain a div floating outside of container div

    How can I place two headings next to each other using CSS?

    How to get same cursor(hand) on links in all browser?

    How to use images in css with Webpack

    How do I change the display position from absolute to relative?

    How do you create boxes like github's explore section?

    How to make a button go down when scrolling? (CSS)

    How to use css in extjs to modify the “browse files” button?

    How to assign CSS to mobile page in asp.net

    how to create a fullscreen website design?

    How to prevent opening multiple popup windows?

    How to align text under image using HTML/CSS?

    How to use scaleable pixels in css

    how to place elements inside divs horizontally

    How do I get jQuery to change classes according to an If/Then statement. My 'home' link will not change class when another link clicked on

    How to stop CSS cascading or how to target only 2nd child and not 3rd with CSS

    How to override the CSS !important property when the original file loads after the customized css file

    How to make space visible in between an unsorted list in HTML/CSS?