Search code examples
htmlcssshapescss-shapes

Using css shape to click being an image?

I am trying to get an input field and button to work even when they are behind a shaped png image.

enter image description here

Now i thought all i had to do was using shape and it would trace the shape. And the button or input field would be editable/clickable

.element { float: left; height: 150px; width: 1300px; shape-outside: img('path/to/red-image-with-shape.png'); }

enter image description here

ps: this situation is a screenshot when an user scrolls upwards. The designer wants the form elements to be accessible even with these scrolling situation.

Solution

  • Set pointer-events: none to the element with the shape. As far as I know there is no other solution. Maybe you could try to make input field transparent and change the z-index. But that would not be what you want. By the way it is not user-friendly to hide the content of the input field.