Solved

CSS text when off-focus

Posted on 2014-04-21
3
491 Views
Last Modified: 2014-04-30
Hello,

Please take a look at this link:

https://id.avast.com/login?target=https%3A%2F%2Fmy.avast.com%3A443%2F

Notice the legends "Email Address" and "Password" on the textfields. Then the textfields get focus, the legend dissapears.

I asume this is CSS? If so, how can I do that, for an email address and password?

Thanks!
0
Comment
Question by:SimpleDude
3 Comments
 
LVL 15

Expert Comment

by:Ess Kay
ID: 40013454
This is for links

a:link {color:#FF0000;}      /* unvisited link */
a:visited {color:#00FF00;}  /* visited link */
a:hover {color:#FF00FF;}  /* mouse over link */
a:active {color:#0000FF;}  /* selected link */

Open in new window



Something similar should work for textbox
specifically the focus command

http://www.w3schools.com/cssref/sel_focus.asp

input:focus
{ 
background-color:yellow;
}

Open in new window

0
 
LVL 35

Accepted Solution

by:
Miguel Oz earned 500 total points
ID: 40013614
This is not CSS, it is the HTML5 placeholder attribute being displayed in the inputs. In your sample site, the first textbox contains "Email address" as shown below:
<input name="username" placeholder="Email address"/>

Open in new window


If you need the same behaviour use  placeholder attribute  in your inputs. For more info check:
http://www.w3schools.com/Tags/att_input_placeholder.asp
0
 

Author Closing Comment

by:SimpleDude
ID: 40033088
That Works excellent!

Thank you so much
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now