Input File behaviours
How do I make an input file behaviours?
Playing with input[type=file] styling.. What is a input file behaviours? How do you make a input file behaviours? This script and codes were developed by Jarad Light on 09 October 2022, Sunday.
Input File behaviours - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Input File behaviours</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <form action=""> <input type="text" placeholder="Name" /> <input type="text" placeholder="Email" /> <input type="text" placeholder="Portfolio" /> <input type="file" class="file-input virgin resume" /> <input type="file" class="file-input virgin cover-letter" /> </form>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Input File behaviours - Script Codes CSS Codes
*, *:before, *:after { box-sizing: border-box;
}
.container { width: 50%; max-width: 30em; margin: 5em auto; padding: 2em; background-color: #f26740;
}
input { width: 100%; padding: 0.5em; border: 1px solid #888888; background: whitesmoke; margin-bottom: 1em;
}
input:last-child { margin-bottom: 0;
}
.file-input { color: transparent; position: relative;
}
.file-input:after { color: #888888; margin-left: 0.5em;
}
.file-input.soiled { color: #888888;
}
.file-input.soiled:after { color: transparent;
}
.file-input.resume:after { content: "Upload your resume.";
}
.file-input.cover-letter:after { content: "Upload your cover letter.";
}
Input File behaviours - Script Codes JS Codes
$('input[type=file]').change(function(){ $(this).addClass('soiled');
});
Developer | Jarad Light |
Username | jaradlight |
Uploaded | October 09, 2022 |
Rating | 3 |
Size | 2,550 Kb |
Views | 20,240 |
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 |
Loading Bar | 2,333 Kb |
Dropdown styles | 2,097 Kb |
Simple Menu | 2,790 Kb |
A Pen by Jarad Light | 2,453 Kb |
Sass Placeholder Stuff | 1,751 Kb |
RPG Tool | 3,422 Kb |
Animated Checkboxes | 2,911 Kb |
Map Location Hover demo | 3,439 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 |
Parallax-ish Sliding Content | Jdsteinbach | 2,748 Kb |
Svg penguin | _massimo | 2,990 Kb |
Price | Catcode | 2,623 Kb |
BSP Dungeon Generation | Xgundam05 | 5,326 Kb |
Playing with FlexBox | _Billy_Brown | 3,162 Kb |
Polo, the flying squirrel | Agbales | 2,445 Kb |
Button shaking | SusanneLundblad | 2,227 Kb |
BabyStore | Pablo-Ai | 3,807 Kb |
Day 11 - Calendar Card | Arnellebalane | 6,984 Kb |
Fullscreen audio play button | 72 | 2,148 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!