CSS3 Form
How do I make an css3 form?
On clicking the field label becomes small and once the Data is filled it again gets back to original position.. What is a css3 form? How do you make a css3 form? This script and codes were developed by Tushar Bandal on 19 December 2022, Monday.
CSS3 Form - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS3 Form</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="fieldOuter">
<input id="Name" type="text" /> <label for="Name">Name</label>
</div>
<div class="fieldOuter">
<input id="LastName" type="text" /> <label for="LastName">Last Name</label>
</div>
<div class="fieldOuter">
<input id="Email" type="text" /> <label for="Email">Email</label>
</div>
<div class="fieldOuter">
<input id="Phone" type="text" /> <label for="Phone">Phone No.</label>
</div>
<div class="fieldOuter">
<input id="City" type="text" /> <label for="City">City</label>
</div>
<div class="fieldOuter">
<input id="State" type="text" /> <label for="State">State</label>
</div>
<div class="fieldOuter">
<input id="Country" type="text" /> <label for="Country">Country</label>
</div>
</body>
</html>
CSS3 Form - Script Codes CSS Codes
body { padding: 10px
}
* { margin: 0
}
.fieldOuter { position: relative; margin: 0 0 10px 0; font-family: arial; font-size: 12px
}
.fieldOuter input { padding: 5px 5px 5px 100px; width: 150px; transition: all 1s; border: 2px solid #999;
}
.fieldOuter label { position: absolute; left:0; top: 0; line-height:15px; background: #999; padding: 7px 10px 6px 0; width: 80px; text-align: right; transition: all 1s; overflow: hidden; color: #fff; white-space: nowrap;
}
.fieldOuter input:focus + label { width: 0; padding-left: 0; padding-right: 0;
}
.fieldOuter input:focus { padding-left: 5px; width: 245px; outline: none; border-color: rgba(82, 168, 236, 0.8);
}
Developer | Tushar Bandal |
Username | tusharbandal |
Uploaded | December 19, 2022 |
Rating | 3 |
Size | 1,836 Kb |
Views | 12,144 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Mobile Accordion | 2,094 Kb |
CSS3 Gallery | 1,924 Kb |
Image hover effect. | 1,715 Kb |
A Pen by tushar bandal | 2,234 Kb |
Theme setting | 4,286 Kb |
Accordian | 2,326 Kb |
Simple Angular Tabs | 1,859 Kb |
CSS3 Animation | 2,248 Kb |
Photo gallery | 1,808 Kb |
Tic Tac Toe game | 2,896 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
CSS3 Fullscreen Background Slideshow | Leetech | 3,435 Kb |
Rain Landing in a Pond | Edball | 3,009 Kb |
The Fantastic Mr Fox | MalZiiirA | 10,435 Kb |
Pagepilling.js | Blossk | 6,554 Kb |
Two column of responsive height | Fixie | 2,908 Kb |
Plotting Points with D3.js | Laurakelly | 31,996 Kb |
Animated rainbow wave on canvas | Icodeforlove | 2,777 Kb |
Alter bg opacity on hover... | Chrisboon27 | 2,054 Kb |
Rotate Demo | Agelber | 3,061 Kb |
Basic 3D Fullscreen Transition | Apetrov | 3,270 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!