Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Form Design

Posted on 2008-10-20
4
Medium Priority
?
220 Views
Last Modified: 2010-04-06
I've just been learning how to use style sheets and would like to be able to spice up the forms on a website I made. I really like how the login and password works on the www.me.com website. Would somebody be able to make an example on how that works so I could learn from it. Im also curious how they make the password input display a value of password, then when clicked it turns to a secure input.
0
Comment
Question by:KyleGreen
  • 2
  • 2
4 Comments
 
LVL 6

Expert Comment

by:thebradnetwork
ID: 22763649
0
 
LVL 6

Expert Comment

by:thebradnetwork
ID: 22763657
If you are new to PHP and MySQL go check out this website....its one i recommend to everyone.

http://www.w3schools.com/php/default.asp
0
 
LVL 20

Expert Comment

by:NerdsOfTech
ID: 22763942
Basically they set a subclass :focus on the INPUT to react to focus.
input {
	font-family: Helvetica;
	background: #fff url('/my/auth/loginForm/en/images/login.png?0b2cb6aac0dfc01459b60bc237bd1b5253d0c6e4') repeat-x scroll 0 -430px;
	border-top: 1px solid #707070;
	border-bottom: 1px solid #cecece;
	border-left: 1px solid #ababab;
	border-right: 1px solid #ababab;
 	font-size: 13px;
 	padding: 4px 3px 1px;
}
 
input:focus {
{
  outline-color: #ced2d5;
  outline-style: solid;
  outline-width: 1px;
  background-color: #fefeee;
  outline-color: #87929e;
}

Open in new window

0
 
LVL 20

Accepted Solution

by:
NerdsOfTech earned 2000 total points
ID: 22765923
Extraction complete...
Try this without the background image css code line :)

input {
        font-family: Helvetica;
        border-top: 1px solid #707070;
        border-bottom: 1px solid #cecece;
        border-left: 1px solid #ababab;
        border-right: 1px solid #ababab;
        font-size: 13px;
        padding: 4px 3px 1px;
}
 
input:focus {
{
  outline-color: #ced2d5;
  outline-style: solid;
  outline-width: 1px;
  background-color: #fefeee;
  outline-color: #87929e;
}

Open in new window

0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

571 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