CSS - Focus login fields just like twitter with only CSS?

Up vote 3 down vote favorite 1 share g+ share fb share tw.

I already posted a similar question and got a jQuery solution that works. Now I want to do it with only CSS/HTML. I saved twitter's homepage locally and deleted all the js scripts and noticed that the effect I'm trying to achieve is with CSS/HTML (when you click on the username/pass the values "Username"/"Password" stay there until you enter text).

I'm a newbie at these kind of new CSS/HTML effects and have spent the last couple of hours trying to replicate it with no success. Here's the html of twitter's login form: Username Password Remember me How should the CSS look like? Or could you point me out to a tutorial on how to achieve the same effect as this is driving me nuts?

Thank you very much, Cris html css html5 css3 link|improve this question asked Jun 8 '11 at 17:20Cris361113 81% accept rate.

On twitter it's not 100% css, they add a class to the 'holding' div which hides the 'holder' span – Andy Jun 8 '11 at 17:39.

Autofocus" is superfluous. – Marcel Jun 8 '11 at 17:34 2 @Marcel, it's not superfluous, it's valid XHTML – KOGI Jun 8 '11 at 17:35 @KOGI: autofocus isn't a valid XHTML form input attribute anyway, so it stands for HTML 5, an explicit value for a boolean attribute is superfluous. – Marcel Jun 8 '11 at 17:47 1 XHTML 5 is a perfectly OK serialization of the language.

– Quentin Jun 8 '11 at 17:53.

You can target elements that are focused or blured like so: input:focus {color:red;} You now need to nest the CSS to hide the span called holder inside the input. Span. Holder input:focus {visibility:hidden;} I have not tried this, but it would be something like this.

To clarify, I have just pulled the JavaScript twitter use and the source for their home page and I can confirm that they are using the following JavaScript function for focus on the field inp.focus() The JavaScript is quite lengthy but it looks like after a quick read that they are using jQuery that is setting focus based on the class being username. I just looked at the autofocus property suggested by another poster and this method has worked for me in my web app currently under development. The code for this is Note, per the documentation at the W3C website, the autofocus property can only be used once on the page.

I have put it into a form that is hidden and shown in an inline element using Fancybox. The grayed out text in the input field can be done with the place-holder element, something I'm already using, add the following into your input element placeholder="Username" NOTE: Both placeholder and autofocus are HTML5 properties and may not be supported by all major browsers yet, this is why JavaScript is still being used by sites like twitter. The styling is done based on CSS/CSS3 greatly, an excellent resource is W3Schools.

I would recommend for what you're wanting to achieve start at the CSS3 section looking at borders. Another resource that is excellent but hasn't been updated for about a month and a half sadly is doctype.tv. Nick has some fantastic advise regarding styling your website along with some great insight into design.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.