CSS Forms
HTML forms are editable with CSS so that you can modify their appearance to suit the design of your site.
Example:
HTML
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Z-index
</title>
</head>
<body>
<div>
<form
action="">
<label
for="name">
Name:
</label>
<input type="text" id="name" name="name" required>
<label for="email"> Email: </label>
<input type="email" id="email" name="email" required>
<label for="password"> Password: </label>
<input type="password" id="password" name="password" required>
<input type="submit" value="submit">
</form>
</div>
</body>
</html>
CSS
input
[type="text"],
input
[type="email"],
input
[type="password"]
{
width
:
100%;
padding
:
12px 20px;
margin
:
8px 0;
display
:
inline-block;
box-sizing
:
border-box;
border
:
1px solid #ccc;
border-radius
:
4px;
}
input
[type="submit"]
{
font-size
:
20px;
width
:
100%;
margin
:
8px 0;
background-color
:
#0044ff;
color
:
white;
padding
:
14px 20px;
border
:
none;
border-radius
:
4px;
}
div
{
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}