- This topic is empty.
December 1, 2015 at 2:37 pm #235465
I am building a contact form on Codepen. When the form is complete it will flip vertically to show a success or error message. However, when the message is displayed, my mouse can click through the message and type in the input fields or click the submit button. How can I stop this from happening?
My pen is at http://codepen.io/koenigsegg1/pen/gaVZKm
Hint: click the buttons on either side of the form to trigger the messages.December 2, 2015 at 3:52 am #235476
backface-visibility: hiddenshould do the trick. Not exactly sure on which elements though but a
*selector seems to solve it. It’s not an issue at all with Firefox apparently.December 2, 2015 at 6:42 am #235490
Thanks. that seems to fix it. However, after i added the code, the close button in the success/error message no longer works. When hovered, the background should change and when clicked, the modal should close. For some reason it’s not working anymore. Any suggestions?December 2, 2015 at 7:57 am #235497
Tricky question, using
*messes with all stacking context I guess. Couldn’t tell you exactly why this happens. It’s a bit unnecessary to use this indiscriminate selector, it was really just a general indication of how it could be fixed. Let me look into it a bit more.
.group, buttonseems to be a better target…December 2, 2015 at 11:27 am #235508
Thanks. It’s kinda working now. The right side of the button is still unresponsive (I think the submit button is messing it up even with
backface-visibility: hidden;) but i think I can just re-position the button higher and it should work.December 2, 2015 at 11:27 am #235509
Sorry, accidental double-post :)December 2, 2015 at 12:12 pm #235512
Oh yeah, I didn’t notice that. Not a clue why it would be happening on the right side only to be honest. Using
z-indexisn’t very straightforward on a 3D translation either. They’re pretty weird. One of those things I (still) lack full understanding of.
Sidenote… this must be painful to watch.
- The forum ‘CSS’ is closed to new topics and replies.