Login Form Using HTML and CSS Styles with good look
code :
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#textfield{
margin: 0px;
height: 20px;
border: solid 1px #d9d9d9;
border-radius:2px;
}
#textfield:hover{
border: solid 1px cadetblue;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
#textfield:focus
{
border: 1px solid #4d90fe;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
#button{
height: 25px;
color: whitesmoke;
background-color: #4d90fe;
border-radius:2px;
}
label{
color: #4d90fe;
}
</style>
</head>
<body>
<table>
<tr>
<td><label>User id</label></td><td><input type="text" name="uid" value="" id="textfield" /></td>
</tr>
<tr>
<td><label>Password</label></td><td><input type="password" name="psw" value="" id="textfield" /></td>
</tr>
<tr>
<td></td><td><input type="submit" value="Sign in" id="button" /></td>
</tr>
</table>
</body>
</html>
output :
code :
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#textfield{
margin: 0px;
height: 20px;
border: solid 1px #d9d9d9;
border-radius:2px;
}
#textfield:hover{
border: solid 1px cadetblue;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
#textfield:focus
{
border: 1px solid #4d90fe;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
#button{
height: 25px;
color: whitesmoke;
background-color: #4d90fe;
border-radius:2px;
}
label{
color: #4d90fe;
}
</style>
</head>
<body>
<table>
<tr>
<td><label>User id</label></td><td><input type="text" name="uid" value="" id="textfield" /></td>
</tr>
<tr>
<td><label>Password</label></td><td><input type="password" name="psw" value="" id="textfield" /></td>
</tr>
<tr>
<td></td><td><input type="submit" value="Sign in" id="button" /></td>
</tr>
</table>
</body>
</html>
output :
That text field color will be change to light blue after kept
the cursor on text field
This text field color will be changes to blue after clicked on
the text field
No comments:
Post a Comment