html - CSS:Can't select text of child with user-select:auto, while parent has user-select:none -

i trying code input form instructions throughout. text not selectable, of course input selectable users can modify text easily.

my html looks this:

<div id="form"> <header> header text </header> instructions on do. <form> <label>first name:</label><input type="text" name="fname" /> <label>last:</label><input type="text" name="lname" /> <label>email:</label><input type="text" name="email" /> </form> <div id="extras"> bunch of separate notes , maybe textarea box</div> </div> 

and css looks this:

#form{ user-select:none; } #form form input{user-select:auto} 

a couple of notes:
included css various browsers in actual code.
tried user-select:text, , did not work.
have many bits of text separated different sections, prefer remove ability select default behavior , apply ability select inputs. applying code make each little bit of text unselectable pain.
if did above fix, still curious issue.

anyone know why happening?

there's no such thing user-select: auto; should use user-select: text; your given code works, may want include rest of code or link it.