1

On a jQuery Mobile page, I have the following:

<input name="SearchCriteria" id="SearchCriteria" value="" 
       placeholder="Case Number, Caption, Client, Firm or Claimaint." />

I am trying to reduce the placeholder font a bit.. I've tried this answer, but it doesn't seem to do anything on a jQuery Mobile page.

Am I missing something simple?

Community
  • 1
  • 1
AngryHacker
  • 59,598
  • 102
  • 325
  • 594

1 Answers1

1

You can try this, but if you are testing it on a mobile, try different browsers too. Because some mobile browsers are very limited. Always try first how it will look on the original browser that came with the phone.

/* all */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }

/* individual: webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

/* individual: mozilla */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }
anchor
  • 755
  • 2
  • 8
  • 17
  • It works on Safari in iOS and Chrome, but not Firefox on the desktop for whatever reason. Anyway, good enough - I am targeting mobile only. – AngryHacker Aug 31 '14 at 19:06