Display different input text on mobile optomised version of site?

I have a se开发者_如何转开发arch box on my site. The text displayed in the input when the page loads is 'search the site'.

<input id="keywords" class="text" type="text" name="keywords" value="search the site">

Im also mobile optimising my site with media queries. For the mobile version I want the text to be uppercase 'SEARCH THE SITE'. If I change the text display with CSS, then whatever a user inputs will also be uppercase. Is there a solution to this problem?

Thanks

As no one has answered and I dont know of any (non javascript or server side detection methods), im going to say the answer is no.