Fancy input fields
How do I make an fancy input fields?
A contact form with fancy input fields . What is a fancy input fields? How do you make a fancy input fields? This script and codes were developed by Jimmy Van Der Sleen on 15 January 2023, Sunday.
Fancy input fields - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fancy input fields</title> <link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="fancy"> <div class="fancy-form"> <div class="fancy-form__wrapper"> <div class="fancy-form__title">Contact formulier</div> <fieldset class="fancy-input"> <input class="fancy-input__input" type="text" /> <hr class="fancy-input__line"> <label class="fancy-input__label">Naam</label> </fieldset> <fieldset class="fancy-input"> <input class="fancy-input__input" type="text" /> <hr class="fancy-input__line"> <label class="fancy-input__label">Bedrijf</label> </fieldset> <fieldset class="fancy-input"> <input class="fancy-input__input" type="text" /> <hr class="fancy-input__line"> <label class="fancy-input__label">Email</label> </fieldset> <fieldset class="fancy-input"> <input class="fancy-input__input" type="text" /> <hr class="fancy-input__line"> <label class="fancy-input__label">Telefoon</label> </fieldset> <button class="fancy-input__button">Verzenden</button> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Fancy input fields - Script Codes CSS Codes
/* RGB */
html { box-sizing: border-box;
}
*, *:before, *:after { box-sizing: inherit;
}
body { background: #50514f; color: #50514f; font-family: 'Titillium Web', sans-serif;
}
.fancy { background: #255f85; box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
}
.fancy-form { padding: 40px 20px; margin: 0 auto; width: 600px; background: #fffcff; -webkit-transform: skew(-20deg); transform: skew(-20deg); box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2);
}
.fancy-form__title { color: #255f85; font-size: 2em;
}
.fancy-form__wrapper { -webkit-transform: skew(20deg); transform: skew(20deg); width: 300px; margin: 0 auto;
}
.fancy-input { position: relative; display: block; margin-top: 40px;
}
.fancy-input__input { background: transparent; border: none; height: 40px; width: 100%; display: block; font-size: 1.7em; padding: 4px 0px; color: #50514f; margin: 0; outline: none; border: none; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;
}
.fancy-input__input:focus ~ .fancy-input__line:after, .fancy-input__input:active ~ .fancy-input__line:after, .fancy-input__input.active ~ .fancy-input__line:after { -webkit-transform: scale(1); transform: scale(1);
}
.fancy-input__input:focus ~ label, .fancy-input__input:active ~ label, .fancy-input__input.active ~ label { color: red; -webkit-transform: translate(0px, -20px); transform: translate(0px, -20px); font-size: 1em; opacity: 1; color: #255f85;
}
.fancy-input__line { background: #ccc; position: relative; height: 2px; border: none; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;
}
.fancy-input__line:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #255f85; -webkit-transform: scale(0); transform: scale(0); -webkit-transition: all 0.5s ease; transition: all 0.5s ease; -webkit-transform-origin: center left; transform-origin: center left;
}
.fancy-input__label { position: absolute; top: 4px; left: 0px; font-size: 1.5em; pointer-events: none; opacity: 0.5; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;
}
.fancy-input__button { display: block; background: #255f85; border: none; color: #fffcff; width: 60%; padding: 15px 0; margin: 40px 0 0 0; font-size: 1.2em; outline: none; cursor: pointer;
}
.fancy-input__button:hover { background: #1a435d;
}
Fancy input fields - Script Codes JS Codes
$.fn.fancyFields = function(){ var $this = $(this); var inputFields = $this.find('.fancy-input__input'); inputFields.on( 'focusout', function(){ var val = $(this).val(); if(val == "") { $(this).removeClass('active') } else { $(this).addClass('active'); } });
};
$(document).ready(function(){ $('.fancy-form').fancyFields();
});
Developer | Jimmy Van Der Sleen |
Username | sjimster |
Uploaded | January 15, 2023 |
Rating | 3 |
Size | 3,537 Kb |
Views | 6,072 |
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 |
List 3d scroll | 3,552 Kb |
Profile Card Envato Remix Challenge | 3,914 Kb |
Flexbox vertical slide menu | 2,995 Kb |
Custom GoogleMaps | 2,357 Kb |
Inline Title Editor | 3,584 Kb |
PreLoad page | 2,365 Kb |
Glow menu | 2,460 Kb |
SoundCloud API user | 4,556 Kb |
One-page Navigation scroll plug-in | 3,677 Kb |
Checkbox menu, pure CSS | 2,816 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 |
Blog Concept 2 | JGallardo | 2,994 Kb |
Scroll to view if element partially out of view port height | ChrisMaki | 2,104 Kb |
A Pen by Mike Otis | Mikeotis | 3,185 Kb |
Buttons with style | Chbymnky | 2,082 Kb |
Slide In Panel | Vikvarg | 2,811 Kb |
A Pen by Tosh | Panev | 2,586 Kb |
Growing Root - Scroll control - CANVAS | Cjonasw | 2,342 Kb |
Vertically rotating text with CSS | Nopr | 2,141 Kb |
Sass random color animation | Jotavejv | 4,827 Kb |
Personal Website Redesign v2.0 | DevItWithDavid | 5,168 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!