Tested in Firefox 4, Safari 4, Chrome 14, Opera 10, IE 8 (and newer).

HTML:
Source Code : 
<!DOCTYPE html>
<!--[if 
lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if 
IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if 
IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if 
gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<
head>
  <
meta charset="utf-8">
  <
meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <
title>Facebook Login Form</title>
  <
link rel="stylesheet" href="css/style.css">
  <!--[if 
lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
  <form class="login" onsubmit="return false">
    <h1>Facebook</h1>
    <input type="email" name="email" class="login-input" placeholder="Email Address" autofocus>
    <input type="password" name="password" class="login-input" placeholder="Password">
    <input type="submit" value="Login" class="login-submit">
    <p class="login-help"><a href="#">Forgot password?</a></p>
  </form>
</body>
</html> 
CSS:
Source Code : 
@import url(http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css);

body {
  
font12px/20px 'Lucida Grande'Verdanasans-serif;
  
color#404040;
  
background#ebc9a2;
}

inputtextareaselectlabel {
  
font-familyinherit;
  
font-size12px;
  -
webkit-box-sizingborder-box;
  -
moz-box-sizingborder-box;
  
box-sizingborder-box;
}

.
login {
  
margin20px auto;
  
padding18px 20px;
  
width200px;
  
background#3f65b7;
  
background-clippadding-box;
  
border1px solid #172b4e;
  
border-bottom-color#142647;
  
border-radius5px;
  
background-image: -webkit-radial-gradient(cover#437dd6, #3960a6);
  
background-image: -moz-radial-gradient(cover#437dd6, #3960a6);
  
background-image: -o-radial-gradient(cover#437dd6, #3960a6);
  
background-imageradial-gradient(cover#437dd6, #3960a6);
  
-webkit-box-shadowinset 0 1px rgba(2552552550.3), inset 0 0 1px 1px rgba(2552552550.1), 0 2px 10px rgba(0000.5);
  
box-shadowinset 0 1px rgba(2552552550.3), inset 0 0 1px 1px rgba(2552552550.1), 0 2px 10px rgba(0000.5);
}

.
login h1 {
  
margin-bottom20px;
  
font-size16px;
  
font-weightbold;
  
colorwhite;
  
text-aligncenter;
  
text-shadow-1px rgba(0000.4);
}

.
login-input {
  
displayblock;
  
width100%;
  
height37px;
  
margin-bottom20px;
  
padding0 9px;
  
colorwhite;
  
text-shadow0 1px black;
  
background#2b3e5d;
  
border1px solid #15243b;
  
border-top-color#0d1827;
  
border-radius4px;
  
background-image: -webkit-linear-gradient(toprgba(0000.35), rgba(0000.220%, rgba(0000));
  
background-image: -moz-linear-gradient(toprgba(0000.35), rgba(0000.220%, rgba(0000));
  
background-image: -o-linear-gradient(toprgba(0000.35), rgba(0000.220%, rgba(0000));
  
background-imagelinear-gradient(to bottomrgba(0000.35), rgba(0000.220%, rgba(0000));
  -
webkit-box-shadowinset 0 1px 2px rgba(0000.3), 0 1px rgba(2552552550.2);
  
box-shadowinset 0 1px 2px rgba(0000.3), 0 1px rgba(2552552550.2);
}

.
login-input:focus {
  
outline0;
  
background-color#32486d;
  
-webkit-box-shadowinset 0 1px 2px rgba(0000.3), 0 0 4px 1px rgba(2552552550.6);
  
box-shadowinset 0 1px 2px rgba(0000.3), 0 0 4px 1px rgba(2552552550.6);
}

.
lt-ie9 .login-input line-height35px; }

.
login-submit {
  
displayblock;
  
width100%;
  
height37px;
  
margin-bottom15px;
  
font-size14px;
  
font-weightbold;
  
color#294779;
  
text-aligncenter;
  
text-shadow0 1px rgba(2552552550.3);
  
background#adcbfa;

[Login to get rid of this advertisement]

  
background-clippadding-box;
  
border1px solid #284473;
  
border-bottom-color#223b66;
  
border-radius4px;
  
cursorpointer;
  
background-image: -webkit-linear-gradient(top#d0e1fe, #96b8ed);
  
background-image: -moz-linear-gradient(top#d0e1fe, #96b8ed);
  
background-image: -o-linear-gradient(top#d0e1fe, #96b8ed);
  
background-imagelinear-gradient(to bottom#d0e1fe, #96b8ed);
  
-webkit-box-shadowinset 0 1px rgba(2552552550.5), inset 0 0 7px rgba(2552552550.4), 0 1px 1px rgba(0000.15);
  
box-shadowinset 0 1px rgba(2552552550.5), inset 0 0 7px rgba(2552552550.4), 0 1px 1px rgba(0000.15);
}

.
login-submit:active {
  
background#a4c2f3;
  
-webkit-box-shadowinset 0 1px 5px rgba(0000.4), 0 1px rgba(2552552550.1);
  
box-shadowinset 0 1px 5px rgba(0000.4), 0 1px rgba(2552552550.1);
}

.
login-help {
  
text-aligncenter;
}

.
login-help {
  
font-size11px;
  
color#d4deef;
  
text-decorationnone;
  
text-shadow-1px rgba(0000.4);
}

.
login-help a:hover {
  
text-decorationunderline;
}

::-
moz-focus-inner {
  
padding0;
  
border0;
}

:-
moz-placeholder color#bcc0c8 !important; }
::-webkit-input-placeholder color#bcc0c8; }
:-ms-input-placeholder color#bcc0c8 !important; } 
Mobile_Guru Reviewed by Mobile_Guru on . Facebook Login Form Tested in Firefox 4, Safari 4, Chrome 14, Opera 10, IE 8 (and newer). HTML: <!DOCTYPE html> <!--> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <!--> <!--> <html class="lt-ie9 lt-ie8" lang="en"> <!--> <!--> <html class="lt-ie9" lang="en"> <!--> <!--><!--> <html lang="en"> <!--<!--> <head> <meta charset="utf-8"> Rating: 5