css - styling placeholder pseudo only works on focus? -

css - styling placeholder pseudo only works on focus? -

i'm having 'issues' styling css html5 placeholder in ff , chrome. example:

http://jchmusic.com

...click 'contact' main menu.

it seems if form position: absolute, placeholder text pseudo style -only- works if field in focus (selected). otherwise, reverts styling of 'real' element.

if form position: relative, works fine.

here code i'm using

input:-moz-placeholder{color:#999; font-family:"courier new", courier, monospace} input:-ms-input-placeholder{color:#999; font-family:"courier new", courier, monospace} ::-webkit-input-placeholder { /* webkit browsers */ color: #999; font-family:"courier new", courier, monospace } :-moz-placeholder { /* mozilla firefox 4 18 */ color: #999; font-family:"courier new", courier, monospace } ::-moz-placeholder { /* mozilla firefox 19+ */ color: #999 !important; font-family:"courier new", courier, monospace; } :-ms-input-placeholder { /* net explorer 10+ */ color: #999; font-family:"courier new", courier, monospace }

i read couple of anecdotes here regarding 'hover', don't know if applies situation. there workaround css or need fall jquery?

i've tested code , i'm noticing javascript adding

class="placeholder"

to inputs when not selected, may changing behavior of normal placeholder. looks jqueryui intervention

css placeholder