How does Apple Store's Input box prevent user clicking on the search box taken to be clicking on the prompting phrase?

I can use a different way to put to prompt phrase in an input box, but I like the way that the prompt phrase stays even when the cursor is blinking, so this is how it is like:

The website is http://store.apple.com/us

At the TOP-RIGHT corner of the page, there is a search box, with a prompt phrase which is a <span>, which is position: absolute in the container.

Also in the container is the <input> element, with position: static

So the prompt span is imposed on top of the input, to have the current effect.

But what I don't understand is, when the user clicks on the prompt phrase span, won't the clicking be on the <span>? So the <input> will not get the focus, and there will be no cursor blinking, user cannot type into the box. How is that overcome?

I don't think using Javascript to handle this is a good way, because what if the user disabled Javascript? The Ap开发者_开发问答ple Store's website also has the effect that with Javascript disabled, if clicking on the prompt phrase span, the prompt phrase span will disappear -- how is that done? I am guessing it is done by some CSS :focus pseudo class or some other ways.

This is a JSFiddle if you want to play with it: http://jsfiddle.net/hndWc/6/

Update: Please don't use Javascript make the input have focus, just like Apple Store with Javascript disabled, it can still make the input have focus.

I updated your fiddle just a bit to show a rough example : http://jsfiddle.net/hndWc/8/

$('#prompt-text').click(function(){
    $('#prompt-text').hide();  
    $('#input-element').focus();
});

This is not complete of course. I'd put in some code to see whether the input or the span has focus so that we can capture the keyboard navigation stuff as well. Not just the click.

EDIT

Apple may not be layering functionality. Having a closer look, they are using HTML5. They are using the placeholder attribute of input elements

http://davidwalsh.name/html5-placeholder

JavaScript is being used. If you disable JavaScript, then you no longer get the initial text.

The way they have it done is, they wrap the span tag with the label tag. Initial text is inside the span tag. On keyuyp, the label tag get hidden so span tag is no longer showing since it's parent is hidden. If you disable JavaScript then you get no label or span tag by default which means no initial text since we can no longer use keyup to hide it.

UPDATE

They use the :focsed CSS selector to achieve background change when input is focused. Check below screenshot.