CSS Property ‘-webkit-user-select: none;’ Prevents Forms From Working Properly
I have been working on a mobile application for the iPhone/iPod that needs to be installed on the user’s device in “fullscreen mode.” Naturally, I wanted to prevent the user from being bothered by the little magnifying/selecting controls, as well as any long-touch menus. So, I thought that I would make a global CSS declaration:
* {-webkit-user-select: none; -webkit-touch-callout: none;}
Worked a treat until I about went bald trying to figure out why my form elements would not accept user-input. If I touched on a textarea, for example, the keyboard would pop up, and keyup/keydown events would fire, but nothing would get inserted into the element, and no cursor appeared. I put -webkit-user-select: text; in the form element’s css declaration, and everything started working great again.